如何在HTML5中將「輸入」字段設置爲「必需」？

在我的網站上，我有一個預訂論壇，，我把那個人不能提交論壇，除非提交他們的姓名和電話號碼。如何在HTML5中將「輸入」字段設置爲「必需」？

<p><label>Phone #:<input type="text" id="phone" name="phone" placeholder="###-###-####" style="margin:10px; width:100px; height:15px" required>

它使用Safari瀏覽器可以完美運行在每個設備上之外的任何移動設備，所以我想知道我可以用什麼代碼，以便它可以在所有設備上工作。

任何輸入/幫助/建議，將不勝感激。

來源

2014-02-10 user3151977

與其他所有瀏覽器相比，移動版Safari驗證並不是真正的平等。您可以前往Can I use查看功能支持。我會做什麼來解決這個問題是抓住Modernizr.js或使用其他功能檢測來確定是否支持表單驗證。如果不是的話，那麼就把它放在一個小小的JS代碼片段中，說這個字段是必需的。

如果您使用Modernizr.js並在HTML5下選擇「輸入屬性」，應該這樣做。

var jsRequired; 

if (!Modernizr.input.required) { 
    jsRequired = true; 
}

然後在表單提交：

$('#form-submit').on('click', (function(evt) { // this is the form submit button 
    evt.preventDefault(); // preventing reload of the page 

    if (jsRequired == true) { 
     var requiredInputs = $('input[required]'); 

     for (var i = 0; i < requiredInputs.length; i++) { 
      if (requiredInputs[i].value == '') { 
       $('#submission-info').text('Whoa whoa whoa, you missed one...'); 

       // highlight the missed one by adding a class 
       requiredInputs[i].className += " submission-error"; 
       return false; //; stop the rest of the submission 
      } 
     } 
    } 

    var formData = $('form#contact-form').serialize(); // serialize data 

    $.ajax({ 
     url: 'mail.php', // rename this to your php file 
     type: 'POST', 
     data: formData 
    }).done(function(response) { 
     // do stuff to to show the user that the form was submitted 
     $('#submission-info').text('Success, your information has been sent to us (and the NSA of course) and we will reply to you as soon as possible.'); 
    }).fail(function(response, error) { 
     // tell the user what happened that caused the form submission to fail 
     $('#submission-info').text('Oh no, something happened. Maybe try again?'); 
    }); 
});

某些代碼周圍應修改以適應你的東西，但除此之外，它應該是在你找什麼做的大方向。

來源

2014-02-10 21:49:56

如何在HTML5中將「輸入」字段設置爲「必需」？

回答

相關問題