如果未在表单中单击按钮，如何阻止表单提交

Question

我有4个按钮和4个文本框，我正在使用bootstrap验证文本框 如果现在没有点击按钮，那么问题是表格不应该提交我怎样才能验证按钮

    <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

试试这个，它运作正常：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

你能试试吗？我测试了here

＆＃13;

＆＃13;

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

$("#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");
    }
});

＆＃13;

＆＃13;

＆＃13;