HTML 表单/提交按钮。如何验证输入并防止提交答案

【问题标题】：HTML form / submit button. How to validate inputs and prevent submitHTML 表单/提交按钮。如何验证输入并防止提交
【发布时间】：2016-02-07 00:21:21
【问题描述】：

我想使用提交按钮，因为它会检查我的表单输入属性。

我的输入都是数字的，并且具有 jQuery 给出的 min / max / required 属性：

<form id="form1">
<table id="table">
  <tr>
    <td>
      <input type="number" /> </td>
    <td>
      <input type="number" /> </td>
    <td>
      <input type="number" /> </td>
  </tr>
</table>
  </form>
<button form="form1">check inputs</button>

并且验证属性是用 jQuery 分配的（最小值：1，最大值：9，必需）

  $('input').attr({
    min: 1,
    max: 9,
  }).prop('required', true);

我设置了 jQuery 以从输入中提取数值并将它们放入数组中，但如果我使用此按钮，它会尝试“提交”我不想要的表单。但是如果我添加 event.preventDefault() 提交按钮不再检查最小/最大/要求的值。

基本上我想要我的按钮做的只是检查验证要求，并触发 jQuery 点击事件。

编辑/澄清：

我想要三样东西： 1.阻止表单提交。没有 POST 2.验证/确保每个输入都有一个有效值 3.触发jQuery点击事件 ( $('button').on('click', function(){ do something... });

【问题讨论】：

标签： jquery html forms

【解决方案1】：

只需调用jquery.validate()，如果失败，调用e.preventDefault()

$("button").click(function(e)
     {
        if(!jquery.validate())
        e.preventDefault();
    });

http://jsfiddle.net/o5y9959b/8/

【讨论】：

我想始终阻止提交，否则解决方案似乎很好。但是，我在控制台中收到错误消息：'jquery is not defined'。
jsfiddle.net/kingcharles/LEZ4r/824 这是我的实际代码，我似乎无法让表单验证工作
我可以在按钮点击时触发警报。在哪里看到错误？ jsfiddle.net/LEZ4r/825
您必须将 e.preventDefaut() 放入验证中。这是工作代码：jsfiddle.net/LEZ4r/826
谢谢，效果更好，但是我的问题的主要目标是我希望验证工作（确实如此），但我不希望提交表单。如果您使用您发送给我的小提琴，并用有效值填写每个单元格，它将提交并且表单将清除。我不想要任何 POST 请求，我只想要按钮检查验证并触发点击事件

【解决方案2】：

用这个代替：

<form id="form1" >
<table id="table">
  <tr>
    <td>
      <input type="number" min="1" max="9" required /> </td>
    <td>
      <input type="number" min="1" max="9" required /> </td>
    <td>
      <input type="number" min="1" max="9" required/> </td>
  </tr>
</table>
<button type="submit">check inputs</button>
  </form>

您不需要为此使用 jquery。

【讨论】：

【解决方案3】：

我不知道您的情况出了什么问题，但我再次解释了一遍，以便您找到可能有用的东西。

<form id="form1" >
<table id="table">
  <tr>
    <td>
      <input type="number" min="1" max="9" required /> </td>
    <td>
      <input type="number" min="1" max="9" required /> </td>
    <td>
      <input type="number" min="1" max="9" required/> </td>
  </tr>
</table>
</form>

<button type="submit" class="onlycheck" form="form1">check inputs</button>
<button type="submit" form="form1">Submits form</button>



$("#form1").on('submit',function(e){
     if( $(e.target).hasClass('onlycheck') ){
         /* 
          some extra validation code here if you want 
          e.x : var valid = true;
          $(this).find('input[type=number]').each(function(i,el){
             if( $(el).val() > $(el).attr("max") ||  $(el).val() < $(el).attr("min")){ //notice that is not performant declare first $(el)
                  valid = false;
                  return false; //break the cicle 
             }
         });
         */
         return false;
     }
});

【讨论】：