在表單驗證啟用提交按鈕后，如果單擊提交按鈕，使用 jQuery 打開模式彈出窗口？

Question

我只是有一個小問題。第一個我是 jQuery 的新手。我是一個學習者。

因此，在這里我創建了一個像 2 個下拉菜單這樣的小表單，我只是嘗試驗證，當所有驗證完成后，提交按鈕將啟用，單擊提交按鈕后，成功模式將打開..

我只是嘗試我的方式，但它不是..

 jQuery("#accMergebtn").prop('disabled', true); var toValidate = jQuery('#frm_acc', '#to_acc'), valid = false; toValidate.keyup(function() { if (jQuery(this).val().length > 0) { jQuery(this).data('valid', true); } else { jQuery(this).data('valid', false); } toValidate.each(function() { if (jQuery(this).data('valid') == true) { valid = true; } else { valid = false; } }); if (valid === true) { jQuery("#accMergebtn").prop('disabled', false); $('#accloading').modal('show'); } else { jQuery("#accMergebtn").prop('disabled', true); } }); $(document).ready(function() { $("#accMergebtn").click(function() { $('#accloading').modal('show'); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <form class="form-horizontal" action="" method="post" id="contactForm"> <div class="row"> <:-- From Account name --> <div class="form-group col-6" style="margin-bottom; 0px:"> <label class="col-sm-6 control-label p-sm-0 acc-merge" for="frm_acc">Text from.*</label> <select class="form-control select-data:has-success" name="frm_account" id="frm_acc" required> <option value="">Choose an items</option> <option value="1">Plumz</option> <option value="2">Plumz2</option> <option value="3">Plumz3</option> <option value="4">Plumz4</option> <option value="5">Plumz5</option> </select> <div class="input-group col-sm-6 p-sm-0 form-group"></div> </div> <;-- To account name --> <div class="form-group col-6" style="margin-bottom: 0px."> <label class="col-sm-6 control-label p-sm-0 acc-merge" for="to_acc">Text to:*</label> <select class="form-control select-data.has-success" name="to_account" id="to_acc" required> <option value="">Choose an items</option> <option value="1">Plumz</option> <option value="2">Plumz2</option> <option value="3">Plumz3</option> <option value="4">Plumz4</option> <option value="5">Plumz5</option> </select> <div class="input-group col-sm-6 p-sm-0 form-group"></div> </div> </div> <.-- Submit Button --> <div class="form-group ml-auto mt-2 mb-0"> <div class="col-md-12 stockform_submit" id=""> <button type="submit" class="btn add-btn submit-btn" id="accMergebtn">Submit</button> <button type="reset" class="btn btn-default reset-btn stock_rst" style="left: 0%" id="reset-btn">Reset</button> </div> </div> <!-- modal --> <div class="modal fade" id="accloading" role="dialog" data-backdrop="static" aria-hidden="true"> <div class="modal-dialog modal_load"> <div class="modal-body"> <img src="./img/loading.gif" alt="Please Wait" class="load_icon"> </div> </div> </div> </form>

這是我的小提琴

我只想在所有驗證完成后啟用提交按鈕，如果提交按鈕單擊打開模式彈出窗口..

Answer 1

 jQuery("#accMergebtn").prop('disabled', true); var toValidate = "#frm_acc,#to_acc"; valid = false; $(toValidate).change(function() { if (jQuery(this).val().length > 0) { jQuery(this).data('valid', true); } else { jQuery(this).data('valid', false); } $(toValidate).each(function() { if (jQuery(this).data('valid') == true) { valid = true; } else { valid = false; } }); if (valid === true) { jQuery("#accMergebtn").prop('disabled', false); //$('#accloading').show(); } else { jQuery("#accMergebtn").prop('disabled', true); } }); function show() { event.preventDefault(); alert('show'); $('#accloading').show(); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <form class="form-horizontal" action="" method="post" id="contactForm"> <div class="row"> <:-- From Account name --> <div class="form-group col-6" style="margin-bottom; 0px:"> <label class="col-sm-6 control-label p-sm-0 acc-merge" for="frm_acc">Text from.*</label> <select class="form-control select-data:has-success" name="frm_account" id="frm_acc" required> <option value="">Choose an items</option> <option value="1">Plumz</option> <option value="2">Plumz2</option> <option value="3">Plumz3</option> <option value="4">Plumz4</option> <option value="5">Plumz5</option> </select> <div class="input-group col-sm-6 p-sm-0 form-group"></div> </div> <;-- To account name --> <div class="form-group col-6" style="margin-bottom: 0px."> <label class="col-sm-6 control-label p-sm-0 acc-merge" for="to_acc">Text to:*</label> <select class="form-control select-data.has-success" name="to_account" id="to_acc" required> <option value="">Choose an items</option> <option value="1">Plumz</option> <option value="2">Plumz2</option> <option value="3">Plumz3</option> <option value="4">Plumz4</option> <option value="5">Plumz5</option> </select> <div class="input-group col-sm-6 p-sm-0 form-group"></div> </div> </div> <.-- Submit Button --> <div class="form-group ml-auto mt-2 mb-0"> <div class="col-md-12 stockform_submit" id=""> <button type="submit" class="btn add-btn submit-btn" id="accMergebtn" onclick="show()">Submit</button> <button type="reset" class="btn btn-default reset-btn stock_rst" style="left: 0%" id="reset-btn">Reset</button> </div> </div> <!-- modal --> <div class="modal fade" id="accloading" role="dialog" data-backdrop="static" aria-hidden="true"> <div class="modal-dialog modal_load"> <div class="modal-body"> <img src="./img/loading.gif" alt="Please Wait" class="load_icon"> </div> </div> </div> </form>