I am trying to verify my code, but the messages are not displaying under the username. They only appear under the password field. I am not sure where I have made a mistake

Question

I am trying to verify my code, but the messages are not displaying under the username. They only appear under the password field. I am not sure where I have made a mistake

Having trouble with my login form validation using jQuery. Can someone help me fix it?

$(document).ready(function() {
  $("#form1").validate({
    rules: {
      username: {
        required: true,
        minlength: 6
      },
      password: {
        required: true,
        minlength: 5

      }
    },
    messages: {
      username: {
        required: "Username is mandatory"
      }
    }
  });
});

.error {
  color: red;
}

p {
  font-size: 13px;
  font-style: arial;
  font-align: left;
}

body {
  font-family: calibri, arial, sans-serif;
  background-color: powderblue;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}

span.password {
  float: right;
  padding-top: 50px;
}

.login-form {
  margin-top: 5%;
  margin-bottom: 5%;
  position: relative;
  width: 390px;
  left: 35%;
  height: 500px;
  border: 6px solid#ff0000;
  padding: 10px;
  background-color: #00ffff;
}

.login-form h1 {
  font-size: 50px;
  text-align: center;
  text-transform: uppercase;
  margin: 40px;
}

.login-form label {
  font-size: 29px;
  text-align: right margin:45px;
}

.login-form input[type=text],
.login-form input[type=password] {
  font-size: 20px;
  width: 350px;
  padding: 10px;
  border: 0;
  outline: none;
  border-radius: 5px;
}

.login-form button {
  font-size: 16px;
  color: white;
  background-color: green;
  font-weight: bold;
  padding: 79px;
  width: 60%;
  margin: 10px 15px;
  padding: 8px 6px;
  border: 5px;
  cursor: pointer;
}

.login-form button:hover {
  border: solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="jquery-validation/dist/jquery.validate.min.js">
</script>
<script src="js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>

<div class="login-form">
  <h1>LOGIN PAGE</h1>
  <form action="#" name="form1" id="form1">

    <label for="firstname">First Name</label>
    <input type="text" name="firstname" id="firstname" placeholder="username"><br>
    <br>
    <label for="password">Password</label>
    <input type="password" name="password" id="password" placeholder="pswd"><br>

    <input name="submit" type="submit" id="submit" class="submit" value="Submit">
    <span>
        <input type="checkbox"  id= "remember" name="remember " value="remember me"> 
        <label for ="checkbox" name="checkbox" >Remember me</label>
        </span>
    <span class="password">Forget <a href="#" >Password ?</a></span>
  </form>
</div>

html jquery css

Answer 1

Answer №1

To cater to your specific situation, you can utilize HTML5 validation attributes for validation.

The provided HTML snippet demonstrates the use of required, minlength, pattern, and max validation attributes.

<form action="#" id="formOne" novalidate>
        <div class="FormGroup">
            <label for="name">Name</label>
            <input 
                type="text" 
                class="FormGroup__Input"
                name="username"
                placeholder="username"
                data-v-input  
                minlength="6" 
                required
            />
            <span class="FormGroup__ErrorLabel"></span>
        </div>
        <div class="FormGroup">
            <label for="password">Password</label>
            <input 
                type="number" 
                name="password"
                class="FormGroup__Input"
                placeholder="password"
                data-v-input
                minlength="5"
                required
            />
            <span class="FormGroup__ErrorLabel"></span>
        </div>
        <button type="submit">Submit</button>
</form>

Instructions to set up this form:

Add the novalidate attribute on the form element to validate inputs using javascript code.
Ensure each input element has a unique name attribute.
Incorporate the data-v-input attribute to identify input elements for Javascript validation.
Specify HTML5 validation rules for each input element.
To display errors, add an element directly below the respective input element. NOTE: The error label must be the next sibling of the input field.

'use strict';
const formNode = document.querySelector("#formOne");

initValidation(formNode, (form, data) => {
    alert(JSON.stringify(data, null, 4))
});

function initValidation(formNode, onSubmitHandler){
    const validationErrors = [];
    const inputs = formNode.querySelectorAll("[data-v-input]");
    const selects = formNode.querySelectorAll("[data-v-select]");

    formNode.addEventListener("submit", handleSubmit);
    inputs.forEach(input => input.addEventListener("blur", handleBlur));
    inputs.forEach(input => input.addEventListener("input", handleInput));

    function handleSubmit(evt){
        evt.preventDefault();
        let formData = {};

        if(inputs.length > 0){
            inputs.forEach(input => {
                validateInput(input);
                formData[input.name] = input.value;
            });
        }
        if(selects.length > 0){
            selects.forEach(select => {
                validateInput(select);
                formData[select.name] = select.value;
            });
        }
        if(validationErrors.length === 0){
            formNode.reset();
            onSubmitHandler(formNode, formData);
        }
    }

    function handleBlur(evt){
        validateInput(evt.target);
    }

    function handleInput(evt){
        validateInput(evt.target);
    }

    function validateInput(inputNode){
        if(inputNode.validity.valid){
            let inputNodeIndex = validationErrors.indexOf(inputNode.name);
            validationErrors.splice(inputNode, 1);
            renderErrorLabel(inputNode, false);
        } else {
            validationErrors.push(inputNode.name);
            renderErrorLabel(inputNode);
        }
    }

    function renderErrorLabel(node, show = true){
        node.nextElementSibling.textContent = show ? node.validationMessage : "";
    }

    return true;
}

Copy the initValidation function into your javascript file.

To begin validating your form, call the initValidation function after the DOM is loaded. It requires two arguments.

a form node: obtained through document.getElementById or any DOM selectors. However, only one form node should be passed to initValidation.
a callback that receives the form node as its first argument and the form's data as the second argument. Place any post-validation actions in the body of this callback. NOTE: This callback is triggered only when all validations pass without errors.

Answer 2

To cater to your specific situation, you can utilize HTML5 validation attributes for validation.

The provided HTML snippet demonstrates the use of required, minlength, pattern, and max validation attributes.

<form action="#" id="formOne" novalidate>
        <div class="FormGroup">
            <label for="name">Name</label>
            <input 
                type="text" 
                class="FormGroup__Input"
                name="username"
                placeholder="username"
                data-v-input  
                minlength="6" 
                required
            />
            <span class="FormGroup__ErrorLabel"></span>
        </div>
        <div class="FormGroup">
            <label for="password">Password</label>
            <input 
                type="number" 
                name="password"
                class="FormGroup__Input"
                placeholder="password"
                data-v-input
                minlength="5"
                required
            />
            <span class="FormGroup__ErrorLabel"></span>
        </div>
        <button type="submit">Submit</button>
</form>

Instructions to set up this form:

Add the novalidate attribute on the form element to validate inputs using javascript code.
Ensure each input element has a unique name attribute.
Incorporate the data-v-input attribute to identify input elements for Javascript validation.
Specify HTML5 validation rules for each input element.
To display errors, add an element directly below the respective input element. NOTE: The error label must be the next sibling of the input field.

'use strict';
const formNode = document.querySelector("#formOne");

initValidation(formNode, (form, data) => {
    alert(JSON.stringify(data, null, 4))
});

function initValidation(formNode, onSubmitHandler){
    const validationErrors = [];
    const inputs = formNode.querySelectorAll("[data-v-input]");
    const selects = formNode.querySelectorAll("[data-v-select]");

    formNode.addEventListener("submit", handleSubmit);
    inputs.forEach(input => input.addEventListener("blur", handleBlur));
    inputs.forEach(input => input.addEventListener("input", handleInput));

    function handleSubmit(evt){
        evt.preventDefault();
        let formData = {};

        if(inputs.length > 0){
            inputs.forEach(input => {
                validateInput(input);
                formData[input.name] = input.value;
            });
        }
        if(selects.length > 0){
            selects.forEach(select => {
                validateInput(select);
                formData[select.name] = select.value;
            });
        }
        if(validationErrors.length === 0){
            formNode.reset();
            onSubmitHandler(formNode, formData);
        }
    }

    function handleBlur(evt){
        validateInput(evt.target);
    }

    function handleInput(evt){
        validateInput(evt.target);
    }

    function validateInput(inputNode){
        if(inputNode.validity.valid){
            let inputNodeIndex = validationErrors.indexOf(inputNode.name);
            validationErrors.splice(inputNode, 1);
            renderErrorLabel(inputNode, false);
        } else {
            validationErrors.push(inputNode.name);
            renderErrorLabel(inputNode);
        }
    }

    function renderErrorLabel(node, show = true){
        node.nextElementSibling.textContent = show ? node.validationMessage : "";
    }

    return true;
}

Copy the initValidation function into your javascript file.

To begin validating your form, call the initValidation function after the DOM is loaded. It requires two arguments.

a form node: obtained through document.getElementById or any DOM selectors. However, only one form node should be passed to initValidation.
a callback that receives the form node as its first argument and the form's data as the second argument. Place any post-validation actions in the body of this callback. NOTE: This callback is triggered only when all validations pass without errors.

I am trying to verify my code, but the messages are not displaying under the username. They only appear under the password field. I am not sure where I have made a mistake

Answer №1

Similar questions

jQuery modal window extension

Is it possible to apply CSS to only the first element?

Is it possible to define the sequence of wrapped items in CSS flexbox?

I'm having trouble getting the code to work properly after the "else" statement using both jQuery and Javascript. My head is

Determine if an object is already present in a JSON array by comparing their respective IDs

Modifying the color of Bootstrap icons

Generate table rows by automatically summing the rows and column data using a loop

Finding and removing an element using Jquery

Chart: Observing the Discrepancy in the Initial X-Axis Points

Broken links detected in the Full Page Navigation menu on a one-page website

Is there a way to restrict a user to selecting just one checkbox in a bootstrap checkbox group?

A simple way to add a value from a select option into a textarea when there are several dropdown menus and select elements sharing the same

My website's links are fully functional with Mozilla Firefox, providing a seamless browsing experience for users

"Customize the appearance of ng-bootstrap datepicker selection with a unique

What is the best way to transfer information from a client's HTML to a node.js server?

Encountering an AJAX issue while attempting to retrieve data

Steps for converting SCSS to CSS using node-sass

Struggling to access a .html page using Selenium?

How can I create eye-catching animations for Android applications?

Removal based on specific conditions upon losing focus