Question

我在输入元素上使用HTML5的required属性，选择框和PHP进行验证。

如果未填写required字段，如何显示提醒？我尝试使用onsubmit()，但无论如何都会处理表单，并且不会显示任何警告。

Answer 1

如果用户的浏览器支持html5，则如果未写入所有必填字段，则无法提交表单。

通常，您可以阻止表单在jQuery中提交，如下所示：

$('#yourformselector').submit(function(event) {
    $(this).find('[required="required"]').each(function() {
        if (!$(this).val().length) {
            event.preventDefault();
            return false;
        }
    });
});

Answer 2

如果您使用的是现代/更新的网络浏览器，则应自动显示默认的浏览器提醒。

或尝试：

    $(document).ready(function() {
    $('form').submit(function() {
        var incomplete = $('form :input').filter(function() {
                             return $(this).val() == '';
                         });
        //if incomplete contains any elements, the form has not been filled 
        if(incomplete.length) {
            alert('please fill out the form');
            //to prevent submission of the form
            return false;
        }
     });
});

Answer 3

您可以使用checkValidity（），它会尝试使用pattern，min，max，required等属性进行验证。Follow this link to go deeper here

function myFunction() {
    var inpObj = document.getElementById("id1");
    if (inpObj.checkValidity() == false) {
        alert('invalid input')
    } else {
        alert('valid input')
    } 
}

<input id="id1" type="number" min="100" max="300" required>
<button onclick="myFunction()">OK</button>

将验证添加到HTML5必填字段

3 个答案: