HTML5 required field and submit with angularjs

Question

How to check the required fields of a form before submitting it in javascript ?

I'm working with Angularjs and as you probably know, I never reload the page. I have created input text like this :

<input type="text" name="truck" ng-model="my model" typeahead="my typeahead" typeahead-min-length="1" required/>

Here is my submit button at the end of the form :

<button type="submit" ng-click="saveDelivery(newDelivery)" class="btn btn-primary">Create the delivery</button>

But when I submit, I go into "saveDelivery" first, and then I have the message from Google chrome : "Please fill in this field..."

How can I do to check the input before submitting ?

My function is very simple : $scope.saveDelivery = function (newDelivery){ alert("pass before submit ?"); $http.post('webservice/rest/delivery/add',newDelivery).success(function(){ alert("You're lucky : it woorks !!"); }); } — psv, Feb 10 '14 at 12:35
Yes it is, but if I test if myinput=="" before the alert in my function, I do not use the HTML5 required property — psv, Feb 10 '14 at 12:43
how are you getting `myinput`? if `myinput` is the actual input element `myinput == ""` won't work. `myinput.value==""` will work. — anurupr, Feb 10 '14 at 12:45
I understand what you mean but the new "required" property of HTML5 do the same thing, easily. I wanna use this property http://www.w3schools.com/tags/att_input_required.asp but the problem is that the test is done after trying to save my form. I would like to test is my inputs are not empty before saving my delivery. — psv, Feb 10 '14 at 13:11
Check out [AngularJS form validation](http://scotch.io/tutorials/javascript/angularjs-form-validation). Might be of help — de-bugged, Feb 10 '14 at 13:22

score 1 · Answer 1 · answered Aug 05 '14 at 20:38

Look into the ng-submit directive.

This essentially looks in your defined form for any validation defined in your markup (required, type). All you have to do is take your click action and place it at the top of your form in the ng-submit directive.

<form ng-submit="saveDelivery(newDelivery)">
    <input type="text" name="truck" ng-model="my model" typeahead="my typeahead" typeahead-min-length="1" required/>
    <button type="submit" class="btn btn-primary">Create the delivery</button>
</form>

Because your button is defined as type 'submit', this will submit the form, preforming the 'ng-click' action for you. Angular will essentially hijack the submit, and validate your form before submitting it to 'saveDelivery'. All you have to do is define what you want validated, whether it is 'required' input, or it you do type="email" on your input, it will use HTML 5 email validation and make sure it is an email address.

Angular made it VERY easy to add validation to any form. Once validation is passed, Angular will then trigger your saveDelivery method!

score 0 · Answer 2 · edited May 23 '17 at 12:14

0

Edit: 2014-02-12 - Here is a very simple example. Try clicking the submit button when the input field has nothing in it. Chrome will show validation message, enter something and the alert will run, but the form will not submit. Example: http://plnkr.co/edit/uGT3scGJtCVJkWE0B7zp?p=preview

The browser will do the validation when the form is submitted I think (Note: not verified, this is just how I understand the flow of events. I may be wrong)

You might want to handle the form submit event to do your saveDelivery call as that (form submit) ought to happen after the validation but before the form is actually posted back. saveDelivery will finish before the form submits, and you can cancel it if needed also and do your own thing...

For example this answer to another post shows how to handle the form submit and prevent it from occuring; this might be useful if you want to call your saveDelivery method to do the actual saving but don't want the form to postback

https://stackoverflow.com/a/5384732/94099

edited May 23 '17 at 12:14

Community

1
1

answered Feb 10 '14 at 12:32

jwwishart

2,865
2
23
26

Ok ok, so I need to reload the page ? – psv Feb 10 '14 at 12:36
No, I'm saying that your current click handler will happen before the browser runs the validation; but if you just let it start submitting the form the validation ought to occur, once the form is deamed to be valid the form submit event will fire... in that event you could do your `saveDelivery` method, you could even cancel the submit at that point if you needed (i.e. saveDelivery might do everything required) The form submit will not occur till your saveDelivery call is completed and will only occur if you don't cancel it Does that help? – jwwishart Feb 10 '14 at 12:43
I want to use the required property of HTML5 http://www.w3schools.com/tags/att_input_required.asp. Do you know it ? – psv Feb 10 '14 at 13:12
Yes I know it. You wanted to know how to call your function after the browser validation of the required attribute but before submission of the form yes? I don't understand your question in the above comment, as I've shown that I already know what the required attribute is. My answer was simply move your saveDelivery call to onsubmit instead of where you have it and chrome will validate before your saveDelivery call is done... it seems like your problem would be solved then? Is it not? Does that not work? Can you give me feedback as to what further issues you are having please? – jwwishart Feb 10 '14 at 20:09
Ok, I understand right now. Thanks for your help ;) I've read too fast your first answer. It's working now. – psv Feb 12 '14 at 07:21
I updated it heaps since first version, so maybe I was vague initially. Glad you got it working! – jwwishart Feb 12 '14 at 10:36

HTML5 required field and submit with angularjs

2 Answers2