Question

我正在使用带有必需标记的输入，此时它不起作用，即使输入中没有单词也可轻松完成提交。我已经搜索了abit的原因，我猜这是因为我正在使用onclick函数。

<form id="regform" method="POST">
First name: <input type="text" id="firstname" required  ><br>
Last name: <input type="text" id="lastname" required ><br>
Username: <input type="text" id="username" required><br>
Password: <input type="password" id="password" required><br>
<input type="radio" name="sex" value="male" required>Male<br>
<input type="radio" name="sex" value="female" >Female
<input type="submit" value="Register" onclick="regBtn(event)">
</form>

有没有办法在使用onclick时保持所需的活动状态？

Answer 1

是。现在你在某个地方有这样的路线：

document.getElementById("regform").submit();

忽略任何内置验证，只需提交表单。

相反，将函数调用移动到表单的onsubmit上，如下所示：

<form id="regform" method="POST" onsubmit="return regBtn(event);">

并将函数更改为返回true或false，而不是强制提交：

function regBtn(event) {
    if (some_cond_here) {
        //all is good, let's submit the form!
        return true;
    } else {
        //something is off, cancel form submission:
        return false;
    }
}

这将保留内置的HTML5表单验证。

Live test case - 只有一个或两个字母的用户名，才能看到手动验证。

Answer 2

请记住：Internet Explorer 9及更早版本或Safari中不支持输入标记的必需属性。

更安全的是这样做：

<form id="regform" method="POST">
First name: <input type="text" id="firstname" class="required"><br>
Last name: <input type="text" id="lastname" class="required" ><br>
Username: <input type="text" id="username" class="required"><br>
Password: <input type="password" id="password" class="required"><br>
<input type="radio" name="sex" value="male" class="required">Male<br>
<input type="radio" name="sex" value="female" >Female
<input id="submit" type="submit" value="Register" onclick="regBtn(event)">
</form>

和jQuery代码：

 $(".required").each(function() 
    {
      if ($(this).val() == "") 
        {
            $('#submit').prop('disabled','disabled');   
        }
    });

Answer 3

在regBtn函数中添加一些行。

function regBtn(event) {
    if (!Array.prototype.slice.call(document.querySelectorAll('input[required]:not([required=false])')).every(function (element) {
        return element.value != '';
    })) {
        return false;
    }
    //main function
}

使用onclick（）时，在输入中保留必需的标记

3 个答案: