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

Duplicate text content from a mirrored textarea and save to clipboard

Creating an HTML structure that limits each li to only contain three div elements can be achieved using React and Underscore.js

"Disappearing act: Navigating through pages causes the navigation

Troubleshooting a problem with dynamic options in Materialize select set

Make Fomantic-UI (Angular-JS) sidebar scroll independently

Press here to expose the remaining portion of the text using the truncate helper

Enhance Your Tables with JQuery Calculations

Eliminate distinct objects during touchend event in a multi-touch web application

Resizing nested elements while maintaining consistent padding dimensions

In JavaScript, provide a boolean response to a callback function from a separate function

Create a button that matches the dimensions of the background image

How to set DIVS to be hidden when the page first loads

Looking to incorporate nested rules in `JSS` using `CSS`?

Easily generate a hierarchical layout in HTML with this straightforward method

Utilize Z-index to hide elements from view

enable jQuery timer to persist even after page refresh

Is there a way to control the visibility of two divs depending on which one a user hovers on?

Ensuring form accuracy upon submission in AngularJS 1.5: Understanding the $invalid state in relation to $pristine field

What's the best way to utilize a navigation bar across various pages?

Performing an AJAX post request in PHP is resulting in an unexpected HTML comment being returned, which ultimately