Develop Reference

How to show native validation error for specific input on change event?

I have a classic HTML5 form. I would like using jquery/javscript to show the browser native error tooltip when the user change a specific input value. I would like to avoid the user try to submit the form to see all errors.
For that, I tried with the functions checkValidity() and reportValidity() but it works only if I add alert('test'); in my condition...so weird
JS script
myInputJqueryObject.on('change', function() {
if ( !this.checkValidity() ) {
this.setCustomValidity( 'Custom error !!!' );
var $form = $('#my-form');
if( $form[0].checkValidity() === false) {
$form[0].reportValidity();
//alert('test'); <-- works only if I active this line code
return true;
}
}
});

You do not need to check the form validity when you know that the input is invalid. You can omit if( $form[0].checkValidity() === false). Also you can reportValidity on the input itself.
And setCustomValidity takes some time to be applied to the input field. So you have to wrap reportValidity into setTimeout:
$('input').on('change', function() {
var self = this;
if (!self.checkValidity()) {
self.setCustomValidity('Custom error !!!');
setTimeout(function() {
self.reportValidity();
self.setCustomValidity('');
}, 1);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="my-form"><input value="del me" required></form>

Based on 'Kosh Very' answer, I found the solution. It sounds good without bugs.
JS Script :
$('input').on('focusout', function() {
var self = this;
var validity = self.checkValidity();
if( !validity ){
if( self.validity.patternMismatch ){ //<-- Optionnal : Condition to keep others native message errors except Pattern.
self.setCustomValidity( 'Custom Error about pattern!!!' );
}
setTimeout(function() {
self.reportValidity();
self.setCustomValidity( '' ); //<-- Important to reinit
}, 1);
}
});

How to not validate certain inputs

I have a form where I'm using twitter typehead & the problem is whenever twitter typehead loads it creates another input field that is blank &not shown to user
Now i have this function to validate all inputs
var fields = $('#second_step input[type=text]');
var error = 0;
if (!$("input[name='career']:checked").val()) {
alert('Please Select yes or no'); return false;
}
fields.each(function(){
var value = $(this).val();
if( value.length<1 || value==field_values[$(this).attr('id')]) {
$(this).addClass('error');
$(this).effect("shake", { times:3 }, 50);
error++;
} else {
$(this).addClass('valid');
}
});
if (!$('#reg').valid()) {
return false;
}
Now due to that typehead input whic has no name or id it just have a certain class tt-hint & this input is read only how can i just skip this input from my above validation?

You can use jQuery's NOT function.
var fields = $('#second_step input[type=text]').not('.tt-hint');

You can filter out the fields with:
var fields = $('#second_step input[type=text]:not(.tt-hint)');

Your input has typeahead applied by using a class selector .typeahead.
So in your case you could use the :not pseudo-class selector to filter them out:
var fields = $('#second_step input[type=text]:not(.typeahead)');
That way you skip the typeahead fields.

Personally I would ignore disabled fields, since the user cannot correct them if there is an error. You say the input is read only so that would seem to correlate.
$('#second_step input[type=text]').filter(function(){ return !this.disabled; })

Try this :
fields.each(function(){
var value = $(this).val();
if($(this).hasClass('tt-hint') {
$(this).addClass('valid');
} else {
if( value.length<1 || value==field_values[$(this).attr('id')]) {
$(this).addClass('error');
$(this).effect("shake", { times:3 }, 50);
error++;
} else {
$(this).addClass('valid');
}
}
});
if (!$('#reg').valid()) {
return false;
}

jQuery validate plugin, check input defaultValue

Trying to validate a field using jquery validate plugin. All I want to check if the current input value is not equal to defaultValue. If it is equal then its not valid, clean the value and show the error message.
Something like that:
...
firstname:{
required: function(element){
return element.val() !== element.defaultValue;
element.val('');
}
}
...
Unfortunately that does not work.

Ok, found a solution. Simply creating a following method solves the issue.
jQuery.validator.addMethod("defaultInvalid", function(value, element){
return !(element.value == element.defaultValue);
},jQuery.validator.messages.required);

Here's an implementation that works for radio buttons as well:
var isChanged = function ($element) {
switch ($element.attr('type')) {
case "radio":
var $formElementsWithSameName = $element.closest('form').find(':input').filter(function () {
return $(this).attr('name') == $element.attr('name');
});
return $formElementsWithSameName.filter(':checked').filter(function () {
return $(this).prop('defaultChecked');
}).length == 0;
case "text":
return $element.val() != $element.prop('defaultValue');
default:
console.error("No implementation of isChanged for element " + $element);
}
};

Display a warning with jQuery

I'm doing some jQuery form validation and I came up with an issue. I have the following code so far:
// catch any form submission
$('form').submit(function () {
'use strict';
// if the browser doesn't support HTML5's required attribute
if (!Modernizr.input.required) {
// catch any field that should be required
$(this).find('input[required]').each(function () {
// if is empty
if ($(this).val() === '') {
// create a span that contains a warning to the user
var requiredFieldWarning = document.createElement('span');
requiredFieldWarning.text = 'This field is required.';
// display the span next to the current field
}
});
}
});
I'm trying to "attach" or display a span next to any input of the submitted form that doesn't validate, but I don't know how to. I want to do this unobtrusively, that's why I create the said span inside JavaScript.
Also, how can I prevent the form from being submitted if any of the fields of the submitted form doesn't validate?

why reinvent the wheel? you should use the jquery form validation plugin..
edit: added code to prevent submition of invalid form.
to answer your question:
$('form').submit(function (e) {
'use strict';
var valid = true;
var $form = $(this);
$form.find("span.error").remove();
// if the browser doesn't support HTML5's required attribute
if (!Modernizr.input.required) {
// catch any field that should be required
$form.find(':input[required]').each(function () {
// if is empty
var $this = $(this);
if ($.trim($this.val()) === '') {
// create a span that contains a warning to the user
$this.after("<span class='error'>This field is required.</span>");
valid = false;
}
});
}
if(!valid){
e.preventDefault();
}
});
here is a shorter version:
$('form').submit(function (e) {
'use strict';
Modernizr.input.required ? e[$(this).find("span.error").remove().end()
.find(':input[required][value=""]')
.after("<span class='error'>This field is required.</span>")
.length ? 'preventDefault': 'isDefaultPrevented']() : null;
});

I am adding a span tag after the input. Before the form is revalidated it removes these spans and recreates only if needed. If any of these spans are added the form isn't submitted.
$('form').submit(function (event) {
'use strict';
$('.invalid-error', $(this)).remove();
// remove any old spans
var submit_form = true;
// form submits by default
// if the browser doesn't support HTML5's required attribute
if (!Modernizr.input.required) {
// catch any field that should be required
$(this).find('input[required]').each(function () {
// if is empty
if ($(this).val() === '') {
$(this).after('<span="invalid-error">This field is required.</span>');
// add span after input
submit_form = false;
}
});
}
if(!submit_form) event.preventDefault();
// stop form from submitting
});

jsFiddle ( http://jsfiddle.net/4KxzB/10/ )
Here is my working example, works as expected in chrome.
To stop the form from submitting, just return false;
<form>
<input type="text" required/>
<input type="submit" value="submit"/>
</form>
<script>
$('form').submit(function ()
{
'use strict';
// if the browser doesn't support HTML5's required attribute
if (!Modernizr.input.required)
{
var validInput = true;
// catch any field that should be required
$(this).find('input[required]').each(function ()
{
// if is empty
if ($(this).val() === '')
{
// create a span that contains a warning to the user
var requiredFieldWarning = document.createElement('span');
requiredFieldWarning.text = 'This field is required.';
// Cancels form submit
validInput = false;
}
});
return validInput;
}
});
</script>​

var flag = 0;
if ($(this).val() === '') {
flag = 1;
var warningblock = '<span class="warning">This field is required.</span>';
$(this).after(warningblock);
}
//end of each loop
if(flag){ //put this block out side the loop
return false; //form wont submit
}
return true;
CSS
.warning{
/**add styles for warning here***/
}

jQuery Validation and Placeholder conflict

I'm using the jQuery Validation plugin to validate a form on my site.
http://docs.jquery.com/Plugins/Validation
I'm also using the following code to provide Placeholder support for browsers that do not support the HTML5 placeholder="" attribute.
// To detect native support for the HTML5 placeholder attribute
var fakeInput = document.createElement("input"),
placeHolderSupport = ("placeholder" in fakeInput);
// Applies placeholder attribute behavior in web browsers that don't support it
if (!placeHolderSupport) {
$('[placeholder]').focus(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
input.removeClass('placeholder');
}
}).blur(function() {
var input = $(this);
if (input.val() == '') {
input.addClass('placeholder');
input.val(input.attr('placeholder'));
}
}).blur().parents('form').submit(function() {
$(this).find('[placeholder]').each(function() { //line 20
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
}
});
});
}
When I submit my form, the following things happen:
In browsers that support the placeholder attribute, the validate() function fires and everything works like it is supposed to.
In browsers that do not support the placeholder attribute, lines 20-25 clear all the "placeholders" and then the validate() function fires. If there are no errors, the page submits and everything works like it is supposed to.
In unsupported browsers, in the event that there are errors, the appropriate fields get applied class="error" like usual -- but the placeholder text doesn't come back until the blur() event happens on a particular field. This leaves those fields blank -- and since there's no labels (just the placeholder attribute) users are left to guess at what each empty field is supposed to contain until the blur() event happens.
The other problem that unsupported browsers have is that since the placeholder fix modifies the value attribute to display the placeholder, fields that are marked as required pass validation when they should be failing.
It seems there's no easy way to use the Validation plugin with the placeholder support code.
I'm looking to either modify the placeholder support code or add a submitHandler: {} function as a parameter to the validate() function to get this working in unsupported browsers.

I ran into a similar issue. Have you gotten yours to work? I'd love to compare notes.
FWIW, here's what I did:
jsfiddle demo here.
Add input placeholders to the jQuery support object:
$.support.placeholder = (function() {
var i = document.createElement( 'input' );
return 'placeholder' in i;
})();
The placeholder chain:
$('input')
.addClass('hint')
.val( function() {
if ( !$.support.placeholder ) {
return $(this).attr('placeholder');
}
})
.bind({
focus: function() {
var $this = $(this);
$this.removeClass('hint');
if ( $this.val() === $this.attr('placeholder') ) {
$this.val('');
}
},
blur: function() {
var $this = $(this),
// Trim whitespace if only space characters are entered,
// which breaks the placeholders.
val = $.trim( $this.val() ),
ph = $this.attr('placeholder');
if ( val === ph || val === '' ) {
$this.addClass('hint').val('');
if ( !$.support.placeholder ) {
$this.val(ph);
}
}
}
});
Add a new validation rule
addMethod docs
$.validator.addMethod('notPlaceholder', function(val, el) {
return this.optional(el) || ( val !== $(el).attr('placeholder') );
}, $.validator.messages.required);
Include the new method in the validate rules object
$('form').validate({
rules: {
name: {
required: true,
notPlaceholder: true
},
email: {
required: true,
notPlaceholder: true,
email: true
}
}
});

I think adding this to jquery.validate.js, to the required function (line 900), is best:
required: function(value, element, param) {
// Our change
if (element.value == element.defaultValue) {
return false;
}
// End our change

Placeholder plugin update solved my issue :)

you can solve this by binding this to the submit function (either through jQuery validate or manually)
if(element.val() == text){
element.val('');
}