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

Keep required tag in inputs while using onclick()

本文关键字：保留 输入 onclick 使用      更新时间：2024-01-17

我使用的是带有必需标记的输入，但目前它不起作用，即使输入中没有单词，也可以轻松完成提交。我已经搜索了一些原因，我想这是因为我使用了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时保持所需的活动？

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

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表单验证。

实时测试用例-只有一个或两个字母的用户名才能看到手动验证生效。

请记住：输入标记的必需属性在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');   
        }
    });

在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
}
相关文章：