Question

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

我的输入都是数字的，并且具有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（min：1，max：9，required）分配

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

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

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

编辑/澄清：

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

Answer 1

只需致电var firstString = "010000111"; var secondString = "10000111"; var positionOfSecondOverFirst = firstString.IndexOf(secondString); // 1 var firstContainsSecond = (positionOfSecondOverFirst >= 0); // true var positionOfLastChar = positionOfSecondOverFirst + secondString.Length - 1; // 8，如果失败，请调用jquery.validate()

e.preventDefault()

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

Answer 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。

Answer 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;
     }
});

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

3 个答案: