0

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.

Ethan
  • 23
  • 4
  • you can check the console for any javascript errors in the developer tools or even check the html source to see if the javascripts are loaded correctly – ssilas777 Oct 21 '21 at 02:30
  • ok, i just did that and jquery.validate.js and loginform.js are not found? what does that mean? because the file loginform literally exists in my folder. is js/... the wrong way to link the js file? edit: i changed the path to just 'loginform.js' and its now saying validate() is not a function – Ethan Oct 21 '21 at 02:37
  • `rule` is not a jQuery Validation option, [it is `rules`](https://jqueryvalidation.org/validate/#rules). "*validate() is not a function*" is a different problem, and tells you that the jQuery validate Javascript file has not been loaded. I'd suggest starting out with some tutorials. – Don't Panic Oct 21 '21 at 07:15

2 Answers2

0

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

Santiago Sierra
  • 18
  • 5
0

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>
pfndesign
  • 174
  • 3
  • 12