如何防止表單提交如果按鈕沒有點擊形式

Question

我有4個按鈕和4個文本框，我正在驗證文本框使用引導 和問題是形式不應該提交如果按鈕沒有點擊現在我怎樣才能驗證按鈕

<form id="test"> 
     <form id="test">           
      <table class="table table-bordered display nowrap" > 
       <thead> 
        <tr> <th >Button</th> 
          <th >Textbox</th> 
         </tr> 
       </thead> 
       <tbody> 
        <tr> 
         <td> 
          <button type="button" class="btn btn-primary btn2">button1</button> 
         </td> 
         <td> 
          <input type="text" class="form-control" name="Allowances"> 
         </td> 
        </tr> 
        <tr> 
         <td> 
          <button type="button" class="btn btn-primary btn2">button2</button> 
         </td> 
         <td> 
          <input type="text" class="form-control" name="Allowances"> 
         </td> 
        </tr> 
        <tr> 
         <td> 
          <button type="button" class="btn btn-primary btn2">button3</button> 
         </td> 
         <td> 
          <input type="text" class="form-control" name="Allowances"> 
         </td> 
        </tr> 
        <tr> 
         <td> 
          <button type="button" class="btn btn-primary btn2">button4</button> 
         </td> 
         <td> 
          <input type="text" class="form-control" name="Allowances"> 
         </td> 
        </tr>           
      </table>  
       <input type="submit" class="btn btn-info" > 
     </form> 

引導驗證

$('#test').bootstrapValidator(
      { 
       message : 'This value is not valid', 
       feedbackIcons : { 
        validating : 'glyphicon glyphicon-refresh' 
       }, 

       fields : { 



        'Allowances': { 
         validators : { 
          notEmpty : { 
           message : 'Enter values' 
          } 
         } 
        }, 



       } 

      }) 
    } 

); 

Answer 1

你可以試試這個。我已經測試here

$("form#test button").on("click", function(){ 
 
    console.log(this); 
 
    $(this).addClass("clicked"); \t \t 
 
}); 
 

 
$("#submitButton").click(function(event){ 
 
    var clickedButtonCount = $("form#test button.clicked").length; 
 
    var buttonCount = $("form#test button").length; 
 
    if(clickedButtonCount == buttonCount) 
 
    { 
 
     $("#test").submit() 
 
     alert("Submitted!"); 
 
    } 
 
    else 
 
    { 
 
     alert("Pleas click all buttons"); 
 
    } 
 
});

Answer 2

試試這個，它工作正常：

var btn1= false 
 
var btn2= false 
 
var btn3= false 
 
var btn4= false 
 
$("#test").click(function(event){ 
 
    event.preventDefault(); 
 
}); 
 
$("#button1").click(function() { 
 
    btn1 = true 
 
}) 
 
$("#button2").click(function() { 
 
    btn2 = true  
 
}) 
 
$("#button3").click(function() { 
 
    btn3 = true  
 
}) 
 
$("#button4").click(function() { 
 
    btn4 = true  
 
}) 
 
$("#submitButton").click(function(event){ 
 
    if (btn1 == true && btn2 == true && btn3 == true && btn4 == true){ 
 
     $("#test").submit() 
 
     alert ("Submitted!") 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<!-- Optional theme --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
 

 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
    <form id="test">           
 
     <table class="table table-bordered display nowrap" > 
 
      <thead> 
 
       <tr> <th >Button</th> 
 
         <th >Textbox</th> 
 
        </tr> 
 
      </thead> 
 
      <tbody> 
 
       <tr> 
 
        <td> 
 
         <button type="button" class="btn btn-primary btn2" id="button1">button1</button> 
 
        </td> 
 
        <td> 
 
         <input type="text" class="form-control" name="Allowances"> 
 
        </td> 
 
       </tr> 
 
       <tr> 
 
        <td> 
 
         <button type="button" class="btn btn-primary btn2" id="button2">button2</button> 
 
        </td> 
 
        <td> 
 
         <input type="text" class="form-control" name="Allowances"> 
 
        </td> 
 
       </tr> 
 
       <tr> 
 
        <td> 
 
         <button type="button" class="btn btn-primary btn2" id="button3">button3</button> 
 
        </td> 
 
        <td> 
 
         <input type="text" class="form-control" name="Allowances"> 
 
        </td> 
 
       </tr> 
 
       <tr> 
 
        <td> 
 
         <button type="button" class="btn btn-primary btn2" id="button4">button4</button> 
 
        </td> 
 
        <td> 
 
         <input type="text" class="form-control" name="Allowances"> 
 
        </td> 
 
       </tr>           
 
     </table>  
 
      <input type="submit" id="submitButton" class="btn btn-info" > 
 
    </form>