We Keep Coding

How to Disable button until required fields are filled without using javascript, just HTML5 and CSS

I have the following form
<form action="" method="post">
<fieldset>
<legend>Booking Details</legend>
<div>
<label for="name">Name:</label>
<input id="name" name="name" value="" required pattern="[A-Za-z-0-9]+\s[A-Za-z-'0-9]+" title="firstname lastname" aria-required="true" aria-describedby="name-format">
<span id="name-format" class="help">Format: firstname lastname</span>
</div>
<div>
<label for="email">Email:</label>
<input type="email" id="email" name="email" value="" required aria-required="true">
</div>
<div>
<label for="website">Website:</label>
<input type="url" id="website" name="website" value="">
</div>
<div>
<label for="numTickets"><abbr title="Number">No.</abbr> of Tickets:</label>
<input type="number" id="numTickets" name="numTickets" value="" required aria-required="true" min="1" max="4">
</div>
<div class="submit">
<input type="submit" value="Submit" onclick="alert('martharfarkar')">
</div>
</fieldset>
</form>
JS Fiddle FROM EXAMPLE
I want to send an email using a webservice on the onclick event of a button, but noticed that the event is triggered regardless the form validation, so the question is, is there a way to trigger the onclick event only if the form is valid without using javascript? perhaps HTML5 has something new to offer

I think the problem is that you are attaching an action to the button click not the form submit. So, two things are happening here:
You are atually using javascript in onclick="alert('whatever')"
You are binding this script to the button click not the form submit
Your validation is working fine for the submit action. Consider use the action parameter in form not the onclick param in the input button.
EDIT:
To be more precise the <input type="submit" value="Submit"> default click action is submitting the form.
Hope it helps!

When I need some extra validation I change submit input to an element 'a' with an 'id' that I can check on a jquery click function. So I validate and I fire a submit manually. Example: $('#formId').submit ().

The best possible way is to bind the action to onsubmit event of the form rather than onclick event of button as user onepopcorn mentioned. It can be done by using
<form action="" method="post" onsubmit=alert('whatever')>
instead of using onclick for the submit button.

Why does myForm.$submitted not work with ng-messages but with ng-if?

I am trying to validate my Form when there is a keypress and also when it its submitted.For that purpose i am writing this code :-
<form name="myForm" ng-submit="submit()" novalidate>
<input type="email" name="email" ng-model="email" required/>
<div ng-messages="myForm.$submitted">
<span ng-message="required">Please enter details in these field</span>
<span ng-message="email">Please enter email</span>
</div>
<button type="submit">Save</button>
</form>
There is a success message in submit function :-
$scope.submit = function(){
console.log("Update Successful");
}
Even if i haven't fill the required field and press Save i still get the "Update Successful" message.So,why doesn't the validation work and why is the submit function even if the validation fails.
Also i found these solution of doing it these way :-
<form name="myForm" ng-submit="myForm.$valid && submit()" novalidate>
<input type="email" name="email" ng-model="email" required/>
<div ng-messages="myForm.email.$error" ng-if="myForm.$submitted">
<span ng-message="required">Please enter details in these field</span>
<span ng-message="email">Please enter email</span>
</div>
<button type="submit">Save</button>
</form>
This works fine but problem is,it should also validated on keypress.However,it only validates on keypress after i have sumbitted the form atleast once before that keypress validation doesn't work.
How should i solve these?
I was also trying myForm.$touched but even that doesn't work when i use it as :-
<div ng-messages="myForm.$touched">
...
</div>

There is a little something that you've missed in implementing AngularJS's form validation.
From the code you've provided, your form, as it seems, is using the default HTML5 form validation and NOT AngularJS form validation.
How?
In order to be able to wire up with AngularJS form validation (technically adding it as a property to the form directive), in addition to the name attribute of the form control, ng-model attribute is also required.
Meanwhile, to disable HTML5 default validation behavior, novalidate attribute must be added to the form tag.
To be able to achieve your expected behavior from the form (i.e. validation on key press as well as on submission, if I'm right) you can implement a combination of yourForm.$dirty and yourForm.$submitted properties:
<div ng-messages="myForm.email.$error" ng-if="myForm.$dirty || myForm.$submitted">
<p ng-message="required">Please enter details in these field</p>
<p ng-message="email">Please enter email</p>
</div>
Demo

Try this:
In html:
<form name="myForm" novalidate>
<input type="email" name="email" required/>
<div ng-messages="myForm.email.$error" ng-if="myForm.email.$touched || valid">
...
</div>
<button ng-click="submit(myForm.$valid)">Save</button>
</form>
In controller:
$scope.submit(valid)
{
valid ? $scope.validCheck = false : $scope.validCheck = true;
}

How to have button in the form which check for required fields on submit but does not refresh the page?

I need to have a form with a button which on submit, check for required field but does not refresh the page.
<form>
<fieldset>
<input type="text" id="firstname" placeholder="First Name" required/>
<input type="submit" value="Send"/>
</fieldset>
</form>
If I disable on submit for form, it wont check for required fields anymore. I need all the functionality of onSubmit but without refreshing the page.
I will appreciate any help.

I'm unsure why you are getting an error. The code provided should work. Try adding an action and a method just in case as follows:
<form action="" method="POST" onsubmit="myFunction()">
<fieldset>
<input type="text" id="firstname" placeholder="First Name" required>
<input type="submit" value="submit">
</fieldset>
</form>
You can then add a function called myFunction down below as follows:
<script>
function myFunction() {
alert("Form was submitted");
}
</script>

Not able to POST form data

I have a Bootstrap form which contains Various fields which need to be entered by User.On Submission of this form I want it to send data to WebService.
But it is not sending user input data of the form.Here is the HTML Markup.
<form class="form-horizontal" role="form" action="~/RegisterUser" method="post">
<div class="form-group">
<label for="firstName" class="col-sm-3 control-label"> First Name </label>
<div class="col-sm-9">
<input type="text" class="form-control" id="FirstName" placeholder="FirstName" required />
</div>
</div>
</form>
and When I am seeing in chrome I am getting Request URL:http://localhost:54990/RegisterUser as Request URL.
Is there anything I am missing on the form or input field creation.
My Service is correct and I am able to get the debugger breakpoint over there with no data that was posted from User.

Your input doesn't have a name. Only named inputs can be successful.

You always give all fields that should be accessed after posting a form a name-attribute. So do something like
<input type="text" class="form-control" id="FirstName" name="FirstName" placeholder="FirstName" required />`
then you can access it by using
$_POST['FirstName'] or however you want to access the values posted.

Remember Password with AngularJS and ng-submit

How do I get the browser to ask the user to remember the password when using ng-submit in an AngularJS single page application.
My Form:
<form action="/#/dashboard/login" onsubmit="return false;" ng-submit="login()" name="loginForm">
<input type="text" required id="username" name="username" ng-model="username" autocomplete="on" placeholder="Username" value="">
<input type="password" required id="password" name="password" ng-model="password" autocomplete="on" placeholder="Password" value="">
<button type="submit" class="btn">Submit</button>
</form>
Any Ideas?
UPDATE
I just added the action to get the browser to recognise the form and trick it into remembering the password. (which obviously didn't work.) The form works fine without the action. The onsubmit="return false;" prevents the execution of the action. Only the ng-submit is doing anything.

Your code is ok, but you need to add the name attributes to your inputfields, such as:
<input type="text" name="username" ...>
and
<input type="password" name="password" ...>

The problem is the dynamically generated login form. After putting the form into the index.html it worked as expected. I guess this is a security issue.
The problem that then occurred was that the ngModels didn't get updated on autofill. After some searching I found the solution to that problem here. In AngularJS 1.2+ this is supposed to be fixed.

Your form HTML is a bit confusing.
<form action="/#/dashboard/login" onsubmit="return false;" ng-submit="login()" name="loginForm">
When the form is submitted do you want it to go to /#/dashboard/login or do ng-submit="login()" ? At the moment, the ng-submit is being ignored in favour of the form action. If you want it to go to /#/dashboard/login as a new page, then just remove the ng-submit and onsubmit attributes and it will work as normal.
If you want it to do ng-submit="login()", then remove the action and onsubmit attributes. Angular automatically prevents form submission when a form with ng-submit does not have an action attribute too. Doing it this way will stop the browser remember password prompt as the form isn't actually submitted anywhere. I guess this is an area where browsers have yet to catch up to the era of the single page application, there's no direct fix for it that I'm aware of.
A workaround would be to have a separate hidden form in the HTML, set the username/password there to the same as the user enters in main form, and then submit that hidden form to an iframe at the same time as ng-submit is called - have a look at How can I get browser to prompt to save password? for ideas about how to do it.

I didn't have to do anything special. But I noticed that while MS Edge and Firefox worked well and offered to remember credentials Chrome didn't.
So simply by providing name attribute to the login form and to username and password it seemed to work fine in Chrome. Autocomplete is on as well. Example:
<form method="post" class="form-horizontal well" ng-submit="login()">
<div class="form-group">
<label class="col-sm-4 control-label">Email Address</label>
<div class="col-sm-8">
<input name="username" ng-model="email" type="email" class="form-control" placeholder="user#example.com" autofocus="autofocus" autocomplete="on" required />
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">Password</label>
<div class="col-sm-8">
<input name="password" ng-model="password" type="password" autocomplete="on" class="form-control" required />
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-4 col-sm-8">
<button type="submit" class="btn btn-primary">Log on</button>
</div>
</div>
</form>
PS: I'm using Chrome Version 45.0.2454.93 m

The culprit is "return false;" on onsubmit. Remove that, and you're good to go. ng-submit takes care of the rest, such as not actually submitting the form when you hit enter in a field or click the submit button.