We Keep Coding

Using HTML form field validation

I am using jQuery Mobile and am attempting to use HTML5 form field validation to perform inline form field validation. I am doing this because I really like the way that the browser reports issues in the bubble and I don't think it is very user friendly to wait until someone has completed filling out a form and then tell them what is wrong. Here is my HTML:
<form id="frmMain" action="#">
<input type="checkbox" data-enhance="false" value="1" id="cbxFB" />
<label for="cbxFB">
<span class="formsubtext">Check this box to use Facebook information to help fill out this registration. Once registered you will be able to use the Facebook login button.</span>
</label>
<label for="tbEmail">*Email</label><input type="email" id="tbEmail" required autofocus placeholder="example#address.com" />
<label for="tbPassword">*Password</label><input type="password" id="tbPassword" required />
<div class="formsubtext" style="margin-top:1px; padding-top:0px; margin-bottom:10px">Minimum of 6 characters, one capital character, and one lower case character.</div>
<label for="tbPasswordConfirm">*Password Confirm</label><input type="password" id="tbPasswordConfirm" required />
<label for="tbPin">*Account Pin</label><input type="password" pattern="[0-9]{4}" id="tbPin" required placeholder="####" />
<div class="formsubtext" style="margin-top:1px; padding-top:0px; margin-bottom:10px">A four digit number that you will remember. This value will be needed to perform sensitive tasks within the application.</div>
<label for="tbFName">*First Name</label><input type="text" id="tbFName" required />
<label for="tbLName">*Last Name</label><input type="text" id="tbLName" required />
<label for="tbPhone">Phone Number</label><input type="tel" id="tbPhone" pattern="\d{3}[\-]\d{3}[\-]\d{4}" placeholder="###-###-####" style="margin-bottom:1px; padding-bottom:0px;" />
<div class="formsubtext" style="margin-top:1px; padding-top:0px; margin-bottom:20px;">Used at your option when you schedule an appointment with a service provider</div>
<div style="display:none;"><label for="tbfbID">Facebook ID</label><input type="text" id="tbfbID" /></div>
<input type="submit" id="btnMainNext" data-icon="arrow-r" data-iconpos="right" value="Next" data-theme="c" class="ui-btn-c ui-btn ui-corner-all" />
</form>
For the confirm password form field I have the following event defined:
$("#tbPasswordConfirm").on("change", function (event) {
var password = $("#tbPassword").val();
var passwordconfirm = $("#tbPasswordConfirm").val();
if (password != passwordconfirm) {
$("#tbPasswordConfirm")[0].setCustomValidity("The value entered does not match the previous password entered.");
$("#btnMainNext").click();
}
else {
$("#tbPasswordConfirm")[0].setCustomValidity("");
}
$(this).focus().select();
})
My problem is that when the user enters something into the field and moves to the next field the HTML form validation shows the error message for the next field (which is required). I want it to show the message for the field they just left. How do I stop the focus from moving to the next field so that the bubble message that shows up is from the field they just entered the data into? As you can see I have tried setting the focus but that does not work. Any help would be greatly appreciated.

You can stop focus from moving to the next field but you can't trigger native validation UI or error message unless you click submit button.
To stop focus from moving next field, after you set the custom validity on the field, you can use:
$('#tbPasswordConfirm').blur(function(event) {
event.target.checkValidity();
}).bind('invalid', function(event) {
setTimeout(function() { $(event.target).focus();}, 50);
});
The blur() function will check the validity on blur and if it would be invalid, the corresponding function in bind() would set the focus back to that element.

Solved it
Fiddle
$(function() {
$("#tbPasswordConfirm").on("input", function(event) {
var thisField = $("#tbPasswordConfirm")[0],
theForm = $("#frmMain")[0],
password = $("#tbPassword").val(),
passwordconfirm = $(this).val(),
custom = password === passwordconfirm ? "" : "The value entered does not match the previous password entered.";
thisField.setCustomValidity(custom);
if (!theForm.checkValidity()) theForm.reportValidity();
});
});

You can use html tabindex attr to manipulate which element will get the focus when you click tab character. See docs to how to use it.
For example, if you make your password confirm input as tabindex="5", you can add tabindex="6" to the <label for="tbPin"> element to prevent next input from focusing right after.

Do not trigger form.$invalid on first load

Having such form
<div ng-controller="FormController as f_ctrl">
<form ng-submit="f_ctrl.submit()" name="myForm">
<input type="text" ng-model="f_ctrl.user.username"
required
ng-minlength="4"/>
<input type="text" ng-model="f_ctrl.user.password"/>
<input type="submit" value="Submit" ng-disabled="myForm.$invalid">
</form>
</div>
and such controller
.controller('FormController', [function() {
var self = this;
self.submit = function() {
console.log('User submitted form with ' + self.user.username)
}
}]);
I have a problem: when page first loads it immediately shows red border on username field, even before I start typing anything.
I need to highlight invalid fields only after first submission. Can this be done using form.$invalid ?

You have to use $pristine for that. It is true when form controller is not changed. so when you change textbox data its comes false.
Small example for you.
<div class="form-group" ng-class="{ 'has-error' : userForm.password.$invalid && !userForm.password.$pristine }">
<input id="passAnime" type="password" name="password" ng-model="user.password" class="form-control input-md" placeholder="Password" tabindex="5" ng-maxlength="25" ng-minlength="6" required>
<span ng-show="userForm.password.$dirty && userForm.password.$invalid">
<p ng-show="userForm.password.$error.required" class="error-messages">
Your password is required.
</p>
<p ng-show="userForm.password.$error.minlength" class="error-messages">
Your password is too short. Minimum 6 chars.
</p>
<p ng-show="userForm.password.$error.maxlength" class="error-messages">
Your password is too long. Maximum 25 chars.
</p>
</span>
</div>

Angular has helpers that tell you if the form (or form field) is $dirty (user has typed something) or if the form is $touched (the blur event has been triggered on the input). See this demo.
I need to highlight invalid fields only after first submission.
Unfortunately, Angular doesn't support that. But you could implement it yourself rather easily:
Controller
function FormController() {
var vm = this;
vm.submitAttempted = false;
vm.submit = function(isValid) {
if (isValid) {
// do stuff
}
else {
vm.submitAttempted = true;
}
};
}
HTML
<div ng-app='app'>
<div ng-controller='FormController as vm'>
<form name='fooForm' ng-submit='vm.submit(fooForm.$valid)' novalidate>
<label>Username</label>
<input
name='username'
type='text'
ng-model='vm.user.username'
required
ng-minlength='4'
ng-class="{'invalid': vm.submitAttempted && fooForm.username.$invalid}">
<br /><br />
<button type='submit'>Submit</button>
</form>
</div>
</div>
CSS
.invalid {
border-color: red;
}
Demo
I have a problem: when page first loads it immediately shows red border on username field, even before I start typing anything.
That's probably because you have the following CSS class:
.ng-invalid {
border-color: red;
}
Angular will always apply the ng-invalid class to fields that are invalid, and there's nothing you could do about that. So if you don't always want invalid fields to have a red border, you can't use that class and you should do it in a way similar to what I proposed above.
Also, check out ngMessages.

You can disable the default styling on the input field that is adding the red border by default, by adding the following CSS:
input:required {
-moz-box-shadow: none;
box-shadow: none;
}
Then if you want to highlight the field when the form is submitted, you will need to ensure that the form and form fields have relevant name attributes. Doing this will allow you to check if the field is valid or not and apply a class to your text field when it is invalid:
<input type="text" name="username" ng-class="{ 'invalid-field' : f_ctrl.myForm.username.$invalid && !f_ctrl.myForm.username.$pristine }" required />
f_ctrl.myForm and f_ctrl.myform.username will have additional properties that you can use/check to determine if the form or fields are invalid or not, or if they have been modified at any point (e.g. f_ctrl.myform.username.$dirty). You should be able to view these properties on your page by adding the follow HTML:
<div>
<pre>{{f_ctrl.myForm | json}}</pre>
</div>
Or, you could output self.myForm to the console from your controller to view it's properties
console.log(self.myForm);

Jquery Validator add labels with every valid() method

i have some issues with jQuery Validator plugin.
After making it work with Scriptaculous I decided to get rid of it.
But I still have problems.
Every time I click the submit button a new label error is added to the html.
this is all the td tag,
<td align="left" colspan="2">
<input class="clase_campo" onfocus="this.className='clase_campo_en_foco';" onblur="this.className='clase_campo';" id="CampoDatos" name="CampoDatos" type="text" value="" size="20" maxlength="6" aria-required="true" aria-invalid="true"><label for="CampoDatos" class="error">Debe ingresar un dato</label>
</td>
the I click on Submit again:
<td align="left" colspan="2">
<input class="clase_campo error" onfocus="this.className='clase_campo_en_foco';" onblur="this.className='clase_campo';" id="CampoDatos" name="CampoDatos" type="text" value="" size="20" maxlength="6" aria-required="true" aria-invalid="true"><label for="CampoDatos" class="error">Debe ingresar un dato</label><label for="CampoDatos" class="error">Debe ingresar un dato</label>
</td>
and I get another LABEL tag.
Another problem is that onfocus() or lostfocus() is not cleaning those new label tags, every time I enter some chars in the field where is supposed to be required, the error don't clear.
the behavior is diferent from the samples.
Maybe I should eliminate onblur and onfocus attributes from the input tag.
Best Regards.
this is my input button
<input id="BotonAceptar" class="btn btn-sm btn-default" type="button" name="BotonAceptar" value="Aceptar" title="" onclick="this.disabled=true; /*formAgregarValor.CampoAccformAgregarValor.value='SUBMIT';formAgregarValor.submit();*/" onmouseout="this.style.fontWeight='normal';" onmouseover="this.style.fontWeight='bold';" style="font-weight: bold;">
this is my validation routine:
$( document ).ready(function(){
$('#BotonAceptar').click(function() {
if ( $("#CampoDatos").valid() &&
$("#CampoImporte").valid() ) {
formAgregarValor.CampoAccformAgregarValor.value='SUBMIT';
formAgregarValor.submit();
};
this.disabled=false;
});
$("#formAgregarValor").validate({
rules: {
CampoDatos: "required",
'CampoImporte': {
required: true,
number: true
}
},
messages: {
CampoDatos: {
required: "Debe ingresar un dato"
},
CampoImporte: "Debe ingresar un numero"
}
});
});

Quote OP:
"Every time I click the submit button a new label error is added to the html... Another problem is that onfocus() or lostfocus() is not cleaning those new label tags, every time I enter some chars in the field where is supposed to be required, the error don't clear."
I am not sure what you're trying to do with all of those inline handlers and your question is very unclear. By default, there is no duplication of the error labels and they automatically toggle when the data in the fields becomes valid/invalid.
If you just want the default functionality of the plugin, and you never explained how it should behave any differently, I think you're trying too hard. (Your code is redundant, overly complex and it's breaking the normal behavior)
Go back to the basics:
DEMO: http://jsfiddle.net/nK6f3/
I have no inline JavaScript in my demo and I've only one click handler. You only need the click handler simply because you're not using a real submit button.
$(document).ready(function () {
$('#BotonAceptar').on('click', function(e) { // capture the <button> click
e.preventDefault(); // stop any default <button> action
$("#FormAgregarValor").submit(); // submit form (automatically validates)
});
$("#FormAgregarValor").validate({ // initializes the plugin on your form
rules: {
CampoDatos: "required",
CampoImporte: {
required: true,
number: true
}
},
messages: {
CampoDatos: {
required: "Debe ingresar un dato"
},
CampoImporte: "Debe ingresar un numero"
}
});
});
As you can see, the HTML is pretty basic:
<form id="FormAgregarValor">
<input name="CampoDatos" type="text" />
<input name="CampoImporte" type="text" />
<input id="BotonAceptar" type="button" value="Aceptar" />
</form>

Make hidden div and inputs optional for valid form submit with jquery.validate

I have a form that may only be one page or may be two pages depending on whether it is a single individual or two people applying. What I am doing right now is enabling a link that allows the user to get to the next group of form elements for their co-applicant via an onchange event that shows the link that will slideToggle the first users inputs and show the inputs for the additional users. It's a pretty lengthy form so I cut it down to a few elements so I could fiddle it out:
Das Fiddle is here
<form method="POST" id="refiLoanForm" action="mailto:i#i.com">
<!--START PRIMARY APPLICANT -->
<div id="primary-applicant">
<label>
Application Type
<select name="applicationType" id="applicationType" class="wider" required>
<option value="individual">Individual</option>
<option value="joint">Joint</option>
</select>
</label>
<br>
<label for="loan-amount" id="loan-amount-label">Requested Finance Amount
<input type="text" id="loan-amount" name="loanAmount" required/></label>
<br>
<label for="remaining-term">Current Loan Remaining Term
<input type="text" id="remaining-term" name="remainingTerm" max="3" size="3" required class="override"/>
</label>
<br>
CONTINUE TO CO-APPLICANT
</div>
<!--END PRIMARY APPLICANT -->
<!--START CO_APPLICANT -->
<div id="co-applicant" style="display: none">
Back to Primary Applicant
<br>
<label for="co-first-name">First Name
<input type="text" id="co-first-name" name="coApplicantGivenName" maxlength="32" required/>
</label>
<br>
<label for="co-last-name">Last Name
<input type="text" id="co-last-name" name="coApplicantFamilyName" maxlength="32" required/>
</label>
</div>
JS:
$('#refiLoanForm').validate({
onkeyup: false,
ignore: ":disabled",
submitHandler: function (form) { // for demo
alert('valid form');
return false;
}
});
$("#singleSubmitBtnLoan").bind('click', function () {
$('#refiLoanForm').valid();
});
//Handle the content being shown
$("#singleSubmitBtnLink2").on('click', function () {
$("#primary-applicant").slideToggle("slow");
$("#co-applicant").slideToggle("slow");
});
$("#backToPrimary").on('click', function () {
$("#primary-applicant").slideToggle("slow");
$("#co-applicant").slideToggle("slow");
});
$('#applicationType').on('change', function() {
if ($(this).val() === 'joint') {
$('.primaryApplicantSwitch').slideToggle("slow");
$('.jointApplicantSwitch').slideToggle("slow");
} else {
$('.primaryApplicantSwitch').slideToggle("slow");
$('.jointApplicantSwitch').slideToggle("slow");
}
});
So in theory, the user can enter the fields and hit submit and the form is either valid or throws some errors. Or, the user can add a co-applicant, and validate the form on the link click before toggling to the next group of inputs.
Any ideas on how I would bind all of this to the one button and get it to play nice with jquery.validate?

You cannot dynamically "toggle" the rules of input fields.
However, you can use the .rules() method to dynamically add/change/remove rules, which essentially mimics the behavior of a toggle.
Also, since you're talking about fields that are hidden, you'll need to disable the option that makes validation ignore all hidden fields.
ignore: []

Happy.js - adding a message below submit button

Awesome people of Stack Overflow,
I'm trying to use Happy.js for validating my form, and it works fine. However, since my form is long and the submit button is at the very bottom of the form, I need a way to let the user know that there a errors on the form.
I'd love some help adding this functionality. Maybe unhiding a div right below the submit button or something like that.
Here's the HTML:
<form name="data" action="#" method="POST" id="JumpstartForm">
<label for="f1" class="control-label">First Name<span class='required'>*</span> </label>
<input title="First Name" type="text" id="f1" name="First_Name" class="input-large" value="" size="25" />
<div class="centered"><input type="submit" id="submitSignup" value="Submit" class="green-button" /></div>
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://www.democracy-nc.org/jumpstart/js/happy.js"></script>
<script src="http://www.democracy-nc.org/jumpstart/js/happy.methods.js"></script>
Here's the js bit:
$(document).ready(function () {
$('#JumpstartForm').isHappy({
fields: {
// reference the field you're talking about, probably by `id`
// but you could certainly do $('[name=name]') as well.
'#f1': {
required: true,
message: 'Please enter your first name'
},
}
});
});
I created a JSfiddle: http://jsfiddle.net/gcasalett/E9Lq7/1/
Live page: http://democracy-nc.org/jumpstart/index.html
First post, so please be kind. Thanks!

What you need it's to use the callback that the plugin provide, called unHappy that it's called when the validation fails for any reason.
For other options you can check the Happy.js mainpage http://happyjs.com/
$(document).ready(function () {
$('#JumpstartForm').isHappy({
fields: {
// reference the field you're talking about, probably by `id`
// but you could certainly do $('[name=name]') as well.
'#f1': {
required: true,
message: 'Please enter your first name'
},
unHappy: function () {
//here you can show a div, or scroll to the last error.
},
}
});
});
Updated jsFiddle : http://jsfiddle.net/E9Lq7/4/