stackoom
  简体   繁体   中英

jQuery validation not working in bootstrap modal

 原文  2018-12-27 15:29:21  7   1    javascript/ jquery/ node.js/ twitter-bootstrap/ express

Question

I have a signup form in an express app. I am using bootstrap for the front-end. I am using the jQuery validation plugin to validate the name, email, phone number etc format but it is not working. Here is the HTML layout of the page. 

 $("#modalForm").validate({ rules: { nameModal: { required: true, minlength: 8 }, emailModal: { required: true, minlength: 5 }, numberModal: { required: true, minlength: 12 }, }, messages: { nameModal: { required: "Please enter name", minlength: "Your data must be at least 8 characters" }, emailModal: { required: "Please enter email", minlength: "Your data must be at least 5 characters" }, numberModal: { required: "Please enter number", minlength: "Number should be atleast 9 character" }, } }); 
 body { background-color: whitesmoke; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; padding: 1%; } .form-links { text-align: center; margin-bottom: 50px; padding-bottom: 4px; } .form-links a { color: #fff; } .formbtn{ background-color: #5d5d5d; border-color: #d6d6c2; font-size: 20px; } div.login{ color: #5d5d5d; background-color: #d6d6c2; border: 1px solid #333; margin-right: auto; margin-left: auto; margin-top: 200px; margin-bottom: 8%; padding: 4%; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; } .float-right a{ color: #5d5d5d; } .float-right a:hover { color: white; } /* The signup modal code */ .signup{ border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; } .modalcolor{ color: #5d5d5d; background-color: #d6d6c2; border: 1px solid #333; padding: 2%; border-radius: 10px; } 
 <head> <link rel="stylesheet" href="css/login.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.0/dist/jquery.validate.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script> <script src="js/myJs/login.js"></script> </head> <div class="container"> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-6 col-lg-4 login"> <form method="POST"> <h3>Gramleys</h3> <div class="form-group"> <label for="InputEmail">Email address</label> <input type="email" class="form-control" name="email" placeholder="Email" required id="emailLogin" /> </div> <div class="form-group"> <label for="InputPassword">Password</label> <input type="password" class="form-control" name="password" placeholder="Password" id="loginPass" /> </div> <br> <button type="submit" name="login" class="btn btn-lg btn-primary formbtn">Login</button> <button type="button" name="create" class="btn btn-lg btn-primary formbtn" data-toggle="modal" data-target="#exampleModal">Create</button> <br> <div class="float-right"> <a href="#" class="float-right">Forgot password</a> </div> </form> </div> </div> </div> <!-- Button trigger modal --> <!-- Modal --> <div class="modal fade signup" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content modalcolor"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Signup</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> <form method="POST" role="form" id="modalForm"> <div class="form-group"> <label for="InputEmail">Email address</label> <input type="email" class="form-control" name="emailModal" placeholder="Email" id="emailModal" required/> </div> <div class="form-group"> <label for="InputName">Full Name</label> <input type="text" class="form-control" name="nameModal" placeholder="Name" required id="nameModal" required/> </div> <div class="form-group"> <label for="InputPassword">Select Password</label> <input type="password" class="form-control" name="passModal" placeholder="Password" id="passModal" /> </div> <div class="form-group"> <label for="InputNumber">Mobile Number</label> <input type="text" class="form-control" name="numberModal" min="1" max="10" placeholder="Mobile Number" required id="numberModal"> </div> <div class="row"> <div class="form-group d-inline col-md-4 col-lg-4"> <label for="InputAge">Age</label> <input style="display: block;"type="number" class="form-control " name="ageModal" min="10" max="100" placeholder="Age" required id="ageModal"> </div> <div class="form-group d-inline col-md-4 col-lg-4"> <label for="InputAge">Weight(kg)</label> <input style="display: block;" type="number" class="form-control " name="weightModal" min="30" max="150" placeholder="Weight" required id="weightModal"> </div> <div class="form-group d-inline col-md-4 col-lg-4"> <label for="InputAge">Height(cms)</label> <input style="display: block;" type="number" class="form-control " name="heightModal" min="100" max="200" placeholder="Height" required id="heightModal"> </div> </div> </form> </div> </div> <div class="modal-footer"> <button type="submit" class="btn btn-secondary">Create</button> </div> </div> </div> </div>

Why is the jQuery validator not working? I have been trying to work it out a lot but it is not working please help me to sort out this problem. I have looked into other answers on stackoverflow but none seems to resolve this issue. Here is the answer from where i took the above js code How to correctly validate a modal form Is it because of express or node environment any help would be highly appreciated.
It works here but does not work on my local node server boostrap is installed using npm in the app. enter image description here No error message displaying as seen in the image.

1 answers

solution1
 2  2018-12-27 16:31:30

The only problem you are having is that your button falls outside form which doesn't trigger the form submit event and hence your form is not validated against it.

You can put that button inside form or you can validate it by this 

$(".createButton").click(function(e){
  if(!$('#modalForm').valid()){
    e.preventDefault()
  }
})


 $(".createButton").click(function(e) { if (!$('#modalForm').valid()) { e.preventDefault() } }) $("#modalForm").validate({ rules: { nameModal: { required: true, minlength: 8 }, emailModal: { required: true, minlength: 5 }, numberModal: { required: true, minlength: 12 }, }, messages: { nameModal: { required: "Please enter name", minlength: "Your data must be at least 8 characters" }, emailModal: { required: "Please enter email", minlength: "Your data must be at least 5 characters" }, numberModal: { required: "Please enter number", minlength: "Number should be atleast 9 character" }, } }); 
 body { background-color: whitesmoke; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; padding: 1%; } .form-links { text-align: center; margin-bottom: 50px; padding-bottom: 4px; } .form-links a { color: #fff; } .formbtn { background-color: #5d5d5d; border-color: #d6d6c2; font-size: 20px; } div.login { color: #5d5d5d; background-color: #d6d6c2; border: 1px solid #333; margin-right: auto; margin-left: auto; margin-top: 200px; margin-bottom: 8%; padding: 4%; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; } .float-right a { color: #5d5d5d; } .float-right a:hover { color: white; } /* The signup modal code */ .signup { border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; } .modalcolor { color: #5d5d5d; background-color: #d6d6c2; border: 1px solid #333; padding: 2%; border-radius: 10px; } 
 <head> <link rel="stylesheet" href="css/login.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.0/dist/jquery.validate.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script> <script src="js/myJs/login.js"></script> </head> <div class="container"> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-6 col-lg-4 login"> <form method="POST"> <h3>Gramleys</h3> <div class="form-group"> <label for="InputEmail">Email address</label> <input type="email" class="form-control" name="email" placeholder="Email" required id="emailLogin" /> </div> <div class="form-group"> <label for="InputPassword">Password</label> <input type="password" class="form-control" name="password" placeholder="Password" id="loginPass" /> </div> <br> <button type="submit" name="login" class="btn btn-lg btn-primary formbtn">Login</button> <button type="button" name="create" class="btn btn-lg btn-primary formbtn" data-toggle="modal" data-target="#exampleModal">Create</button> <br> <div class="float-right"> <a href="#" class="float-right">Forgot password</a> </div> </form> </div> </div> </div> <!-- Button trigger modal --> <!-- Modal --> <div class="modal fade signup" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content modalcolor"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Signup</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> <form method="POST" role="form" id="modalForm"> <div class="form-group"> <label for="InputEmail">Email address</label> <input type="email" class="form-control" name="emailModal" placeholder="Email" id="emailModal" required/> </div> <div class="form-group"> <label for="InputName">Full Name</label> <input type="text" class="form-control" name="nameModal" placeholder="Name" required id="nameModal" required/> </div> <div class="form-group"> <label for="InputPassword">Select Password</label> <input type="password" class="form-control" name="passModal" placeholder="Password" id="passModal" /> </div> <div class="form-group"> <label for="InputNumber">Mobile Number</label> <input type="text" class="form-control" name="numberModal" min="1" max="10" placeholder="Mobile Number" required id="numberModal"> </div> <div class="row"> <div class="form-group d-inline col-md-4 col-lg-4"> <label for="InputAge">Age</label> <input style="display: block;" type="number" class="form-control " name="ageModal" min="10" max="100" placeholder="Age" required id="ageModal"> </div> <div class="form-group d-inline col-md-4 col-lg-4"> <label for="InputAge">Weight(kg)</label> <input style="display: block;" type="number" class="form-control " name="weightModal" min="30" max="150" placeholder="Weight" required id="weightModal"> </div> <div class="form-group d-inline col-md-4 col-lg-4"> <label for="InputAge">Height(cms)</label> <input style="display: block;" type="number" class="form-control " name="heightModal" min="100" max="200" placeholder="Height" required id="heightModal"> </div> </div> </form> </div> </div> <div> <div class="modal-footer"> <button type="submit" class="createButton btn btn-secondary">Create</button></div> </div> </div> </div> </div>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question jQuery Validation not working in bootstrap modal remote content jQuery Form Validation is not working on bootstrap modal jquery for bootstrap modal not working jQuery not working in bootstrap modal validation not working in bootstrap data modal jQuery Bootstrap validation not working JQuery function not working in Bootstrap Modal Jquery Autocomplete is not working in Bootstrap Modal Jquery on function not working in a bootstrap modal JQuery delay to Bootstrap Modal not working
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM