'Using Javascript validation checks in a Django Project

I have to make a registration page in a project that uses Django as the backend framework.. In the registration page, I have to input the names, email, password and mobile... During registration, I need to validate email if its a valid format, check if the mobile number is of 10 digits and check if the password is a strong one.. I want to do it using javascript... I have written the code for the form and also the javascript function... But while running on the server I am unable to get the desired validation checks and alerts... Please help what should i do?

signup.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    {% load static %}
    <link rel="stylesheet" href="{% static 'signup1.css'%}">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Register</title>
    <!--Javascript form validator-->
    <link rel="stylesheet" href="{% static './register.js' %}">
  </head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <div class="card">
                    <div class="text-center">
                        <h1>Signup</h1>
                        <h6>Register yourself</h6>   
                    </div>
                          <form style="text-align: top;" name="myForm" method="POST" action="" onsubmit="validate()" >
                          {% csrf_token %}
                            <div class="mb-3">
                                <label for="exampleInputEmail1" class="form-label"><b>First Name</b></label>
                                <input type="text" name="first_name"placeholder="First Name" class="form-control" id="name" required aria-describedby="emailHelp">                                
                              </div>
                              <div class="mb-3">
                                <label for="exampleInputEmail1" class="form-label"><b>Last Name</b></label>
                                <input type="text" name="last_name"placeholder="Last Name" class="form-control" id="name" required aria-describedby="emailHelp">                                
                              </div>
                              <div class="mb-3">
                                <label for="exampleInputEmail1" class="form-label"><b>Mobile Number</b></label>
                                <input type="tel" name="mobile"  class="form-control" id="number" required aria-describedby="emailHelp">
                              </div>
                            <div class="mb-3">
                              <label for="exampleInputEmail1" class="form-label"><b>Email address</b></label>
                              <input type="email"  name="email" placeholder="Enter Email Id" class="form-control" id="email" required aria-describedby="emailHelp">
                            </div>
                            <div class="mb-3">
                              <label for="exampleInputPassword1" class="form-label"><b>Password</b></label>
                              <input type="password"  name="password" placeholder="Enter Password" class="form-control" id="password" required>
                            </div>
                            <div class="mb-3">
                              <label for="exampleInputPassword1" class="form-label"><b>Your Choice</b></label><br>
                              <input type="radio" id="user" name="user_type" value="user">
                                <label for="html">User</label><br>
                                <input type="radio" id="admin" name="user_type" value="admin">
                                <label for="css">Admin</label><br>
                            </div>                 
                            <button type="submit" class="btn btn-primary" onclick="validate()">Submit</button>
                    </form>
                    <a style="color: aqua; margin-top: 10px;" href="http://localhost:8000/"><small>Already Registered? Click to login</small></a>
                </div>
            </div>
        </div>
    </div>    
</body>
</html>

function validate() 
      { 
          
          var abc=document.forms["myForm"]["first_name"].value;
          if(abc=="")
          {
              alert("Please enter the first name");
              return false;
          }
          var def=document.forms["myForm"]["last_name"].value;
          if(def=="")
          {
            alert("Please enter the last name");
            return false;
          }
          var email = document.forms["myForm"]["email"].value;
          var re = "/^[a-z0-9+_.-]+@[a-z0-9.-]+$"
          var x=re.test(email);
          if(x)
          {}
          else
          {
            alert("Email id not in correct format");
            return false;
          }      

          var mobile = document.forms["myForm"]["mobile"].value;        
          var check="^(\+91[\-\s]?)?[0]?(91)?[789]\d{9}$"
          var a=check.test(mobile);
          if(a)
          {}
          else
          {
            alert("Invalid mobile number");
            return false;
          }             
      
          var pass=document.forms["myForm"]["password"].value;
          var checks="^(?=.[a-z])(?=.[A-Z])(?=.\d)(?=.[@$!%?&])[A-Za-z\d@$!%?&]{8,}$"
          var res=checks.test(pass);
          if(res)
          {}
          else
          {
            alert("Password must contain atleast 1 small, 1 capital, 1 numeric, 1 special character and must be atleast 8 characters long");
            return false;
          }
      }

javascript django

Solution 1:^[1]

Your regular expressions are formatted as strings, not regular expressions.

For example...

// re is string
var re = "/^[a-z0-9+_.-]+@[a-z0-9.-]+$"
var x=re.test(email);

// re is regex
var re = /^[a-z0-9+_.-]+@[a-z0-9.-]+$/
var x=re.test(email);

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Ryan O'D

'Using Javascript validation checks in a Django Project

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]