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">×</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.
