html - html5 formulaires avec polyfills - en vaut la peine

Mots clés : htmlformspolyfillswebshimhtml

meilleur 2 Réponses html - html5 formulaires avec polyfills - en vaut la peine

vote vote

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'); 
vote vote

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> 

Questions similaires