如何在 HTML5 中将 INPUT 字段设为“必填”？答案

【问题标题】：How To Make an INPUT Field As "Required" In HTML5?如何在 HTML5 中将 INPUT 字段设为“必填”？
【发布时间】：2014-03-08 09:31:36
【问题描述】：

在我的网站上，我有一个预订论坛，我说除非提交他们的姓名和电话号码，否则此人无法提交论坛。

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

除了使用 safari 的任何移动设备之外，它在所有设备上都能完美运行，所以我想知道我可以使用什么代码，以便它可以在所有设备上运行。

我们将不胜感激任何输入/帮助/建议。

【问题讨论】：

标签： html forms safari submit require

【解决方案1】：

与所有其他浏览器相比，移动 Safari 验证并不能真正达到标准。您可以转至Can I use 查看功能支持。我要解决这个问题是抓取 Modernizr.js 或使用其他一些功能检测来确定是否支持表单验证。如果不是，那就把它放在一个小 JS sn-p 中，说该字段是必需的。

如果您使用 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?');
    });
});

一些代码应该改变以适应你的东西，否则它应该是你想要做的大方向。

【讨论】：