Required attribute HTML5

Question

Within my web application I am using some custom validation for my form fields  Within the same form I have two buttons  one to actually submit the form and the other to cancel reset the form   Mostly I use Safari as my default browser  Now Safari 5 is out and suddenly my cancel reset button didn t work anymore  Every time I did hit the reset button the first field in my form did get the focus  However this is the same behavior as my custom form validation  When trying it with another browser everything just worked fine  I had to be a Safari 5 problem   I changed a bit in my Javascript code and I found out that the following line was causing the problem   document getElementById  somefield   required   true    To be sure that would be really the problem I created a test scenario    lt  DOCTYPE html gt   lt html gt   lt head gt       lt title gt Test lt  title gt   lt  head gt    lt body gt       lt form id  someform  gt           lt label gt Name  lt  label gt  amp nbsp  lt input type  text  id  name  required  true    gt  lt br  gt           lt label gt Car  lt  label gt  amp nbsp  lt input type  text  id  car  required  true    gt  lt br  gt           lt br  gt           lt input type  submit  id  btnsubmit  value  Submit     gt       lt  form gt   lt  body gt   lt  html gt    What I expected would happen did happen  The first field  name  did get the focus automatically   Anyone else stumbled into this

User · Answer

Just put the following below your form  Make sure your input fields are required    lt script gt      var forms   document getElementsByTagName  form        for  var i   0  i  lt  forms length  i              forms i  noValidate   true          forms i  addEventListener  submit   function event                if   event target checkValidity                      event preventDefault                    alert  Please complete all fields and accept the terms                              false          lt  script gt

User · Answer

Safari 7 0 5 still does not support notification for validation of input fields   To overcome it is possible to write fallback script like this  http   codepen io ashblue pen KyvmA  To see what HTML5   CSS3 features are supported by browsers check  http   caniuse com form-validation  function hasHtml5Validation          Check if validation supported  amp  amp  not safari   return  typeof document createElement  input   checkValidity      function    amp  amp         navigator userAgent search  Safari    gt   0  amp  amp  navigator userAgent search  Chrome    lt  0         form   submit function        if  hasHtml5Validation                  var isValid   true          var  inputs     this  find   required              inputs each function                var  input     this                input removeClass  invalid                if    trim  input val    length                                isValid   false                   input addClass  invalid                                                       if  isValid                        return false                        SASS   LESS   input  select  textarea        include appearance none       border-radius  0px        amp  invalid           border-color  red  important

User · Answer

A small note on custom attributes  HTML5 allows all kind of custom attributes  as long as they are prefixed with the particle data-  i e  data-my-attribute  true

User · Answer

I just ran into this issue with Safari 5 and it has been an issue with Opera 10 for some time  but I never spent time to fix it  Now I need to fix it and saw your post but no solution yet on how to cancel the form  After much searching I finally found something   http   www w3 org TR html5 forms html attr-fs-formnovalidate   lt input type submit formnovalidate name cancel value  Cancel  gt    Works on Safari 5 and Opera 10

User · Answer

Note that    lt input type  text  id  car  required  true    gt    is wrong  it should be one of   lt input type  text  id  car  required   gt   lt input type  text  id  car  required      gt   lt input type  text  id  car  required      gt   lt input type  text  id  car  required required   gt   lt input type  text  id  car  required  required    gt   lt input type  text  id  car  required  required    gt    This is because the true value suggests that the false value will make the form control optional  which is not the case

User · Answer

Okay  The same time I was writing down my question one of my colleagues made me aware this is actually HTML5 behavior  See http   dev w3 org html5 spec Overview html the-required-attribute  Seems in HTML5 there is a new attribute  required   And Safari 5 already has an implementation for this attribute

User · Answer

If I understand your question correctly  is it the fact that the required attribute appears to have default behaviour in Safari that s confusing you  If so  see  http   w3c github io html sec-forms html the-required-attribute  required is not a custom attribute in HTML 5  It s defined in the spec  and is used in precisely the way you re presently using it   EDIT  Well  not precisely  As ms2ger has pointed out  the required attribute is a boolean attribute  and here s what the HTML 5 spec has to say about those      Note  The values  true  and  false  are not allowed on boolean attributes  To represent a false value  the attribute has to be omitted altogether    See  http   w3c github io html infrastructure html sec-boolean-attributes

[html] Required attribute HTML5

Examples related to html