Ive been trying to do a side project to learn website coding and what not.
what im trying to do right now is a simple validation of a form, and to show error messages when the required rules are not met.
this is my login.html
<html>
<title>Login</title>
<head>
<link rel="stylesheet" href="csslogin.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src= "js/jquery.validate.js"></script>
<script src= "js/loginform.js"></script>
<head>
<body>
<h1 id="title"> Login Form </h1>
<div id="firstblock">
<form id= loginform>
<label id="formfield">Username:</label><br>
<input type="text" name="username" placeholder="Enter your Username"><br>
<label id="formfield">Password:</label><br>
<input type="password" name="password" placeholder="Enter your Password"><br>
<input type="submit" id="submitbtn" value="Login"><br>
<input type="checkbox" id="rembme" name="rememberme" value="true">
<label type="text" id="remblabel" style="">Remember me</label>
</form>
</div>
</body>
</html>
this is my loginform.js
$(document).ready(function() {
$('#loginform').validate({
rule:{
username:{
required: true,
minlength: 5
},
password:{
required: true,
}
},
messages:{
username: {
required: "Please Enter a Username",
minlength: "Your Username Must Be At Least 5 Characters"
},
password: {
required: "Please Enter a Password:",
}
}
})
})
When putting the required field in the html file input it works okay but I want to learn how to link it like this. I am not sure how to check if the js is even being imported properly, but as of right now my loginform.js isnt even using the rules or messages that ive set which leads me to believe im either linking the wrong js cdn hotlink which ive tried multiple different ones or that im missing some sort of line in my html file to link my js file.
Sorry for the messy post I have not posted on here in a long long time and am not really sure how to format it properly so I kinda just threw everything in I think someone would need to answer.
Some of the validations you are aiming for can be quickly achieved using just html.
Attributes: "required" and "minlength"
<form id= loginform>
<label for="username">Username:</label><br>
<input id="username" type="text" name="username" placeholder="Enter your Username" required minlength="5"><br>
<label for="password">Password:</label><br>
<input id="password" type="password" name="password" placeholder="Enter your Password" required><br>
<input type="submit" id="submitbtn" value="Login"><br>
<input type="checkbox" id="rembme" name="rememberme" value="true">
<label for="rembme" type="text" style="">Remember me</label>
Also, note that I put the id inside all input tags and then I linked each label with the property "for". This way if you click on the label, the input associated with it gains focus. This is good practice
Now, with the above you get the validation messages for the user provided by the browser. If you still want to customize the massages yourself take a look at this post
And finally, if you still wanna do it with jquery, take a look at this code
the best practice is to insert your scripts at the end of your HTML file before the tag. your jquery version was old but your main problem was a typo in the jquery validation config . instead of "rule", you must use "rules". https://jqueryvalidation.org/validate/
<HTML>
<head>
<title>Login</title>
<link rel="stylesheet" href="csslogin.css" />
</head>
<body>
<h1 id="title">Login Form</h1>
<div id="firstblock">
<form id="loginform" method="get" action="">
<label id="formfield">Username:</label><br />
<input type="text" name="username" placeholder="Enter your Username" /><br />
<label id="formfield">Password:</label><br />
<input type="password" name="password" placeholder="Enter your Password" /><br />
<input type="submit" id="submitbtn" value="Login" /><br />
<input type="checkbox" id="rembme" name="rememberme" value="true" />
<label type="text" id="remblabel" style="">Remember me</label>
</form>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"></script>
<script>
$(document).ready(function() {
$("#loginform").validate({
rules: {
username: {
required: true,
minlength: 5,
},
password: {
required: true,
},
},
messages: {
username: {
required: "Please Enter a Username",
minlength: "Your Username Must Be At Least 5 Characters",
},
password: {
required: "Please Enter a Password:",
},
},
});
});
</script>
</body>
</html>