Question

在我的网站上我有一个预订论坛，并且我认为除非提交他们的姓名和电话号码，否则该人不能提交论坛。

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

除了使用safari的任何移动设备之外，它在每个设备上都很完美，因此我想知道我可以使用哪些代码，因此它可以在所有设备上运行。

任何输入/帮助/建议都将受到赞赏。

Answer 1

与所有其他浏览器相比，移动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?');
    });
});

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

如何在HTML5中将INPUT字段设置为“必需”？

1 个答案: