Name is not copied to replacement input

[thejuan]

trafficstars

I'm using jquery-validation along side my html5 forms. It requires all inputs to be validated to have a name property. When the shadow input is added it doesn't have a name so it's not validated. The original field is hidden, so it also is not validated.

Is there a way to control the attributes that are copied to the shadow elements? Or some extension point to modify the replacement elements?

[aFarkas]

We can not copy the name attribute, because this would give wrong values to the backend, not validating invisible elements is not standard compliant.

webshim is coming with a standard compliant validation engine: http://afarkas.github.io/webshim/demos/demos/forms.html#UI-ival

Consider to use this instead of jquery-validation.

[thejuan]

Understand. FYI, my understanding of the html5 spec is as implemented by Jquery http://www.w3.org/TR/html5/forms.html 4.10.5.1.1 Hidden fields are exempt from constraint validation.

[aFarkas]

@thejuan The spec you are referring is talking about type="hidden", it does not talk about display: none, big difference.

If you really really want to use jQuery validation, you can do so. There is an option to validate invisible elements too.

But again, you already have a quite good validation inside of webshim/the native browser implementation. It doesn't make sense to add another script on top of it.

Isn't this easy enough for you? http://jsfiddle.net/trixta/9859C/embedded/result,html/

[thejuan]

How do you check a form is valid in JS? I'll definitely look at swapping to it.

[aFarkas]

There are multiple possibilities:

//The checkValidiy method return true/false, but also triggers invalid events on all invalid input, which means the validation UI is also invoked
$('form').checkValidity();

// check whether form has valid elements:
$('form :invalid').length

//get validity info about a specific element:
console.log($(':invalid').prop('validity'));

//while this is already implemented as a polyfill / it is currently not enforced (chrome doesn't support this yet)
$('form').is(':invalid');

Also note: In case you want to do some AJAX things. You don't have to do anything. Just bind to the submit event. As long as a form is invalid the submit event is never fired.

[aFarkas]

In case you want to get the $('form').is(':invalid') feature into all browsers you can do this:

//has to be run before calling webshim.polyfill
try {
webshim,bugs.bustedValidity = !$('<fieldset />').is(':valid');
} catch(e){}

webshim.polyfill('forms forms-ext');

Note: I will add this feature detect as soon as Chrome has this in its stable version (i.e: 41 supports this).