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表單/提交按鈕。如何驗證輸入並防止提交

回答

相關問題