How to create error messages validate form input with jQuery?

Question

I have the register form as below:

<div class="form">
    <form class="register-form" name="register-form">
        <ul class="errorMessages"></ul>
         <div class="user-name">
             <input class="wrap" name="firstname" type="text" placeholder="firstname" required/>
              <input class="wrap" name="lastname" type="text" placeholder="lastname" required/>
              </div>
          <input name="password" type="password" placeholder="password" autocomplete="off" required/>
          <input name="email" type="text" placeholder="email address" autocomplete="off" required/>
          button class="btn-signup" type="submit">Create</button>
          <p class="message">Already registered? <a href="#">Sign In</a></p>
</div>

I create JQuery code check if input is blank, this will create error message"

$(function() {
    var createAllErrors = function () {
        var form = $(".register-form");
        var errorList = $('ul.errorMessages', form);

        var showAllErrorMessages = function () {
            errorList.empty();

            form.find(':invalid').each(function (index, node) {
                var label = $('input').attr('name');
                var message = node.validationMessage || 'Invalid value.';
                errorList
                    .show()
                    .append('<li><span>' + label + ': ' + '</span>' + message + '</li>');
            });
        };
        $('input[type=submit], button', form).on('click', showAllErrorMessages);
    };
    $('form').each(createAllErrors);
});

But when I press button I have result:

Any problem about label variable? or on form find invalid input?

Check if following solves your issue. Good luck.

ScanQR
– ScanQR

2016-11-20 13:41:19 +00:00
Commented Nov 20, 2016 at 13:41 — ScanQR
– ScanQR, Commented Nov 20, 2016 at 13:41

marvinhagemeister · Accepted Answer · 2016-11-20 12:10:55Z

1

The error is inside your each loop. You're never using the current index, and instead you requery the whole dom in search for input elements. Whenn you call getter functions on a jQuery collection, jQuery will return the attribute of the first element inside the collection. In your case this is the firstname input element. Use the current element of the each loop instead:

form.find(':invalid').each(function (index, node) {

  // WRONG: This will always return firstname
  //var label = $('input').attr('name');

  // RIGHT: Access the current element inside each loop
  var label = $(node).attr('name');

  // ...
});

answered Nov 20, 2016 at 12:10

marvinhagemeister

3,1641 gold badge25 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ScanQR · Accepted Answer · 2016-11-20 15:12:42Z

You need to find "each" input which is "invalid". Following line is problematic in your current code.

//this will always find first 'input' element in the DOM!
  var label = $('input').attr('name');

Following should fix your issue,

    $(function() {
    var createAllErrors = function () {
       var form = $(".register-form");
       var errorList = $('ul.errorMessages', form);

       var showAllErrorMessages = function () {
       errorList.empty();

       form.find(':invalid').each(function () {
            // for each invalid input find it's attribute 'name'
            var label = $(this).attr('name');
            var message = $(this).validationMessage || 'Invalid value.';
            errorList
                .show()
                .append('<li><span>' + label + ': ' + '</span>' + message + '</li>');
            });
       };
       $('input[type=submit], button', form).on('click', showAllErrorMessages);
    };
    $('form').each(createAllErrors);
});

Collectives™ on Stack Overflow

How to create error messages validate form input with jQuery?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related