jQuery validation in Bootstrap Modal does not work
Two problems with your code here...
rules:{
name:{ // <- no such element
required:true,
minLength:8 // <- no such rule
},
pass:"required"
},
You have no such input element with
name="name"
. Perhaps you meantemail
.There is no such rule called
minLength
. I think you meantminlength
.
NOTE: You have the same two issues above also within your messages
option.
Working DEMO: http://jsfiddle.net/nk3j4mtu/
Ricardo
Portfolio Ricardo HenriqueMyBannersCloudtagsMultitools Programming Languages: PHPJavascriptC# (WFA)CJava Front-end: HTMLCSS Databases: MySqlSQLite ORM:NHibernateFluent NHibenrnate Back-end Frameworks: CakePHP 3Dwoo Template engine Front-end Frameworks: Twitter BootstrapJquery Unit Test: PHPUnitNUnit
Updated on July 15, 2022Comments
-
Ricardo almost 2 years
Applying jQuery validation to a Modal bootstrap it has no effect , checked all the included libraries and their order and noticed that they were correct.
- Bootstrap: version 3.3.1
- jQuery: version 1.11.1
- jQuery-validate: version 1.13.1
Head Code:
<head> <title>Titulo</title> <link rel="stylesheet" type="text/css" href="../CSS/StyleSheet.css"/> <script type="text/javascript" src="../Bootstrap/js/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="../Bootstrap/js/bootstrap.min.js"></script> <script type="text/javascript" src="../datepicker/js/bootstrap-datepicker.js"></script> <script type="text/javascript" src="../Jquery-Validate/jquery.validate.min.js"></script> <script type="text/javascript" src="../Javascript/ActionJS.js"></script> <link rel="stylesheet" type="text/css" href="../Bootstrap/css/bootstrap.min.css" media="screen" /> <link rel="stylesheet" type="text/css" href="../datepicker/css/datepicker.css" media="screen" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> </head>
Modal code (Load it's HTML without AJAX)
<div class="modal fade" id="login_modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <form class="form-horizontal" id="login-form" action="../PHP/ValidateForm.php" method="get"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title span7 text-center" id="myModalLabel"><span class="title">Login</span></h4> </div> <div class="modal-body"> <div class="col-md-6"> <div class="form-group"> <label for="input_email" class="control-label col-md-3">Your Email (login)</label> <div class="col-md-9"> <input type="email" class="form-control" id="email" name="email" placeholder="Email"> </div> </div> <div class="form-group"> <label for="input_password" class="control-label col-md-3">Password</label> <div class="col-md-9"> <input type="password" class="form-control" id="pass" name="pass" placeholder="Password"> </div> </div> <div class="checkbox text-center"> <label><input type="checkbox" id="remember_me" name="remember_me">Remember me on this computer</label> </div> </div> <div class="form-group text-center"> <div class="col-md-6 col-md-offset-3"> <button type="reset" class="btn btn-danger">Reset</button> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="submit" class="btn btn-primary" name="login_form_submit" value="Login">Login</button> </div> </form> </div> </div> </div>
Changing the tag into the modal -body submit button does not work and checked in this video would be the correct position it.
ActionJS Code (validation file)
$(document).ready(function(){ $("#login-form").validate({ rules:{ name:{ required:true, minLength:8 }, pass:"required" }, messages:{ name:{ required:"Please provide your Login", minLength:"Your Login must be at least 8 characters" }, pass:"Please provide your password" } });
});
-
Sparky over 9 yearsStackOverflow is English only please.
-
Lord_Dracon over 6 yearsBrasileiro brasileirando.
-
Ricardo over 9 yearswork's fine when I put $("#login-form").validate({ ... }) inside tag <script> in HTML
-
Sparky over 9 years@RicardoHenrique, it should go without saying that all JavaScript belongs within
<script></script>
tags. Your code showed no such problems in that regard. Glad you got it sorted out.