单击“Enter”按钮时提交表单，并进行验证答案

【问题标题】：Submit form when Clicking "Enter" button, with validation单击“Enter”按钮时提交表单，并进行验证
【发布时间】：2019-08-28 05:54:00
【问题描述】：

这里我有一个表单，我需要在“enter”键按下时提交表单，我已经将按钮类型设置为“submit”，以便在按下时提交表单，同时，我调用带有验证和确认的函数，它不要求确认消息并关闭并提交，我的预期结果是，当我按 Enter 时它应该显示确认/验证消息，我再次按 Enter 它应该提交。下面是我的代码

            <form name="form1" id="form1" action="SizeMaster.php" enctype="multipart/form-data" method="post">
             <input type="text" class="form-control" name="txtSizeName"  value="" />
             <button type="submit" onClick="return fnSave()" class="btn btn-success waves-effect"><i class="material-icons">save</i><span>SAVE</span></button>
             </form>


              function fnSave(){
              if(form1.txtSizeName.value==""){
                alert("Please Enter size");
                return false;
              }
                  (!confirm("Are You Sure Want to confirm the Request?")){
              return false;
              }
              form1.action="SizeMaster.php?Mode=SAVE";
 }

【问题讨论】：

ChangeonClick to onsubmit (w3schools.com/jsref/event_onsubmit.asp)
你尝试过什么来调试你的问题？是否有为onSubmit 注册的处理程序？该代码仅显示了按钮的onClick 事件的处理程序，当您不单击该按钮时显然不会触发该事件

标签： javascript html

【解决方案1】：

$(document).on("submit", "form#form1", function (event) {
event.preventDefault();
//put your conditions here
if(form1.txtSizeName.value==""){
     alert("Please Enter size");
      return false;
    }
});

//OR


$(document).keypress(function (e) {
        if (e.which == 13) {
            $('form#form1').submit();
        }
    });

【讨论】：

【解决方案2】：

请在 onClick 事件上调用您的函数。在确认之前您缺少if。

试试这个。

 <form
  name="form1"
  id="form1"
  onSubmit="return fnSave()"
  action="SizeMaster.php"
  enctype="multipart/form-data"
  method="post"
>
  <input type="text" class="form-control" name="txtSizeName" value="" />
  <button type="submit" class="btn btn-success waves-effect">
    <i class="material-icons">save</i><span>SAVE</span>
  </button>
</form>

<script>
  function fnSave() {
    if (form1.txtSizeName.value == "") {
      alert("Please Enter size");
      return false;
    }
    if (!confirm("Are You Sure Want to confirm the Request?")) {
      return false;
    }
    form1.action = "SizeMaster.php?Mode=SAVE";
  }
</script>

【讨论】：

【解决方案3】：

利用onsubmit

<form onsubmit="return fnSave()" name="form1" id="form1" action="SizeMaster.php" enctype="multipart/form-data" method="post">
     <input type="text" class="form-control" name="txtSizeName" value="" /> 
    <button type="submit" class="btn btn-success waves-effect"><i class="material-icons">save</i><span>SAVE</span></button> 
</form>

【讨论】：

现在应该更好地使用正确的 JS 处理程序，而不是在标记中混合使用
SO 询问为什么函数的行为不符合预期，而不是最佳实践。

【解决方案4】：

你应该在表单元素的 onSubmit 属性上添加动作监听器

<from onSubmit='fnSave()' > ...

然后在fnSave() 函数上，您将获得this 变量上的事件对象。然后调用 this.preventDefault() 来阻止表单提交。之后您可以进行验证和其他操作

【讨论】：

现在应该更好地使用正确的 JS 处理程序，而不是在标记中混合使用