$(function() {
$("#login").validate({
rules: {
username: {
required: true,
minlength: 5
},
password: {
required: true,
minlength: 7
}
},
messages: {
username: {
required: "Enter your username",
minlength: "Username should be minimum 5 characters long"
},
password: {
required: "Enter your password",
minlength: "Password should be minimum 7 characters long"
}
},
});
});
You have missed $ symbol in front of ("#login") selector. Hope it helps you…
I’m trying to use the validation plugin for my login form but I am getting an error saying “#login validate” is not a function. Below I have the HTML code and JS code with the appropriate libraries included.
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js"></script>
<link href="recipe.css" rel="stylesheet"/>
<script src="loginval.js"></script>
<body>
<header>
<center>
<h1> Login Page</h1>
<center>
</header>
<nav>
<ul>
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="foodrecipe.html">Food Recipes</a>
</li>
<li>
<a href="add.html">Add Recipe</a>
</li>
<li>
<a href="delete.html">Delete Recipe</a>
</li>
<li>
<a href='login.html'>Login Page</a>
</li>
<li>
<a href="signup.html">Sign Up</a>
</li>
</ul>
</nav>
<form id="login" align="center">
<input name="username" placeholder="Username" type="text" > <br>
<input name="password" placeholder="Password" type="text"> <br>
<input class="btn btn-primary" id="submit-button" type="submit" value="Login"> <br>
</form>
</body>
</html>
Above is my HTML and below is my Jquery code
$(function() {
("#login").validate({
rules: {
username: {
required: true,
minlength: 5
},
password: {
required: true,
minlength: 7
}
},
messages: {
username: {
required: "Enter your username",
minlength: "Username should be minimum 5 characters long"
},
password: {
required: "Enter your password",
minlength: "Password should be minimum 7 characters long"
}
},
});
});
I had executed the same scenario for my signup form and I had no errors with that. But for some reason, I am having a validation error even though I included the jquery validation library.
