html - html5 formulaires avec polyfills - en vaut la peine
meilleur 2 Réponses html - html5 formulaires avec polyfills - en vaut la peine
94
//polyfill forms (constraint validation) and forms-ext (date, range etc.) $.webshims.polyfill('forms forms-ext'); <input type="date" /> <input type="date" min="2012-10-11" max="2111-01-01" /> <input type="range" disabled /> <input type="email" required placeholder="Yo you can use a placeholder" /> //polyfill constraint validation $.webshims.polyfill('forms'); //on DOM-ready $(function(){ $('form').bind('firstinvalid', function(e){ //show the invalid alert for first invalid element $.webshims.validityAlert.showFor( e.target ); //prevent browser from showing native validation message return false; }); }); <!-- the JS code above will generate the following custom styleable HTML markup for the validation alert --> <span class="validity-alert-wrapper" role="alert"> <span class="validity-alert"> <span class="va-arrow"><span class="va-arrow-box"></span></span> <span class="va-box">Error message of the current field</span> </span> </span> .form-ui-invalid { border-color: red; } .form-ui-valid { border-color: green; } <input required data-errormessage="Hey this is required!!!" /> //configure webshims to use customizable widget UI in all browsers $.webshims.setOptions('forms-ext', { replaceUI: true }); $.webshims.polyfill('forms forms-ext'); //configure webshims to use customizable widget UI in all non mobile browsers, but a customizable one in all desktop and all non-capable mobile browsers $.webshims.setOptions('forms-ext', { //oh, I know this is bad browser sniffing :-( replaceUI: !(/mobile|ipad|iphone|fennec|android/i.test(navigator.userAgent)) }); $.webshims.polyfill('forms forms-ext'); 86
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script> <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js" type="text/javascript"></script> <script> // set options for html5shiv if(!window.html5){ window.html5 = {}; } window.html5.shivMethods = false; </script> <script src="webshims/js-webshim/minified/extras/modernizr-custom.js"></script> <script src="webshims/js-webshim/minified/polyfiller.js"></script> <script class="example"> $.webshims.setOptions({ //we do not use any DOM-/JS-APIs on DOM-ready, so we do not need to delay the ready event <- good against fouc waitReady: false }); //load all polyfill features $.webshims.polyfill('forms forms-ext'); </script> <script type="text/javascript"> $(function(){ var frm = $('#tstForm'); frm.submit(function () { var someDate=$('#someDate').val(); alert('someDate:'+someDate); // you can make your ajax call here. return false; }); }); </script> </head> <body> <form id="tstForm"> Some Date:<input id="someDate" name="someDate" type="date" min="2013-01-01" max="2013-06-01" ></input> Full Name:<input id="fullName" name="fullName" type="text" required></input> Age:<input id="age" name="age" type="number" required min="18" max="120"></input> <input type="submit" value="Submit"/> </form> </body> </html>