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

我想使用提交按钮，因为它会检查我的表单输入属性。HTML表单/提交按钮。如何验证输入并防止提交

我的输入是所有的数值，并且具有最小/最大/所需要的所有的jQuery给出的属性：

<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 ...}）;

来源

2015-11-05 jmancherje

把这一个代替：

<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这个

来源

2015-11-05 23:43:32 Yalin

他已经这样做了'.prop（“需要”，真）;' –

只要打电话jquery.validate()，如果失败，调用e.preventDefault()

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

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

来源

2015-11-05 23:44:56 DinoMyte

我要永远阻止提交，否则该解决方案似乎是在捣鼓好。但是，我收到错误：我的控制台中'jquery未定义'。 – jmancherje

http://jsfiddle.net/kingcharles/LEZ4r/824/ 这是我的实际代码的小提琴，我似乎无法获得表单验证工作 – jmancherje

我可以触发按钮单击提示。哪里看到错误？ http://jsfiddle.net/LEZ4r/825/ – DinoMyte

我不知道你的情况出了什么问题，但我再次解释它，所以你可以找到你可能会觉得有用的东西。

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

来源

2017-01-12 16:20:38

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

回答

相关问题