Question

美好的一天，

我正在处理一个表单，其中所有文本字段都具有必需属性;我注意到，当我点击提交必需属性时，不显示弹出窗口以验证字段是否为空。

我的页面上有两个提交按钮，都使用onclick submitform函数;一个打开一个新选项卡，另一个提交表单并转到新页面。

出于调试目的，我删除了打开新选项卡的按钮，并删除了第二个按钮上的onclick属性，它可以正常工作;我一直在谷歌搜索，但我似乎无法找到我现在的相同情况。

我认为它与我的JS有关，但我不确定在我的代码中添加或删除的内容;请参阅下面的代码。

的JavaScript

 function submitForm(action,newtab)
 {
    document.getElementById('add2').target = newtab ? '_blank' : '_self';
    document.getElementById('add2').action = action;
    document.getElementById('add2').submit();
 }

HTML

 <form id="add2" action="add5.php" method="post">
 <input placeholder="First Name" tabindex="1"
 name="fname" maxlength="128" size="30" required>
 <input placeholder="Last Name" tabindex="12"
 name="lname" maxlength="128" size="30" required>
 <button tabindex="3" value="Save"
 name="save" onclick="submitForm('add3.php',1);" 
 type="submit">Child Information</button>
 <button tabindex="4" value="Save"
 name="save" onclick="submitForm('add5.php',0);" 
 type="submit">Save Details</button>
 </form>

我有一个按钮属性，但我已将其设置为type =“submit”，我非常确定可行，因为我已经测试了它，当我删除了onclick功能;我的问题是我可以在不删除JavaScript的onclick函数的情况下使用属性吗？

非常感谢任何帮助。

Answer 1

我找到了问题的答案，问题是我将onClick方法绑定到提交。 onClick将首先触发，导致它越过验证器。

解决方案是我在我的HTML代码上将onClick更改为onSubmit。

<button tabindex="3" value="Save"
name="save" onsubmit="submitForm('add3.php',1);" 
type="submit">Child Information</button>
<button tabindex="4" value="Save"
name="save" onsubmit="submitForm('add5.php',0);" 
type="submit">Save Details</button>

Answer 2

您需要在表单上使用“checkValidity（）”方法，然后才能在onclick函数中提交，如下所示：

if($("#add2").checkValidity()) { 
 document.getElementById('add2').submit();
}

看到这个小提琴：http://jsfiddle.net/36uv2e52/33/

Answer 3

您可以在提交之前简单地检查值，而不是使用required。

function submitForm(action,newtab) {
    fname = document.getElementById('fname').value;
    lname = document.getElementById('lname').value;
    if (fname == "" || lname == "") {
        alert("First and last name are required");
        exit;
    } else {
        document.getElementById('add2').target = newtab ? '_blank' : '_self';
        document.getElementById('add2').action = action;
        document.getElementById('add2').submit();
    }
 }

Javascript onclick函数停止工作所需的HTML5

3 个答案: