JQuery Validation does not show the right message

2
votes

I'm working with JQuery validation plugin to validate a mail-adress.

    rules: {
        mail_person: {
            required: true,
            email: true
        }
    },
    messages: {
        mail_person: {
            required: "Mail required",
            email: "Mail invalid"
        }
    },

Problem is: If the input is empty and the submit button is clicked, the error message is "input is requiered". When I start typing into the mail-input field, the message should change to "invalid mail" but it doesn't.

And the other way round: if the input is invalid and the submit button is clicked, the correct message "input invalid" occures, but does not change to "input is required" when the input is deleted.

Here is a plunker

2
javascriptjqueryvalidationemailjquery-validate

2 Answers

2
votes

Try this code

        <!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap-css@*" data-semver="4.0.0-alpha.3" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" />
    <script data-require="[email protected]" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script data-require="[email protected]" data-semver="1.12.0" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.12.0/jquery.validate.min.js"></script>
    <script data-require="[email protected]" data-semver="1.12.0" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.12.0/additional-methods.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
    <script>

    $(document).ready(function() {
    $("#signupForm1").validate({
    rules: {
        mail_person: {
           required: true,
           email: true,

        }
    },
    messages: {
        mail_person: {
           required: "Mail required",
        email: "Mail invalid"

        }
    },
    errorElement: "div",
    errorLabelContainer: '.errorTxt',
    errorPlacement: function(error, element) {
        // Add the red unterline to the error element
          /*  $(element).parent().addClass("validation-error")
            // Add the alert
           if (!element.parent().next().hasClass('alert alert-danger')) {
            $('<div class="alert alert-danger" role="alert" style="height: 20px;"> <p class="text-center validation-error-message">' + error.text() + '</p></div>').insertAfter(element.parent());
        }*/
    },
    success: function(label, element) {
        // Remove the error
           /* if ($(element).parent().hasClass('validation-error')) {
            $(element).parent().removeClass("validation-error");
            $(element).parent().next().detach();
        }*/
    },
    });
});

  </script>
  </head>
  <body>
    <form id="signupForm1" role="form" method="post">
      <div class="container">
    <div class="input-group gap-bottom">
      <span class="input-group-addon col-lg-5 col-md-6 col-sm-8 col-6" id="basic-addon3">
        <small>mail</small>
      </span>
      <input class="form-control" id="mail_person" name="mail_person" aria-describedby="basic-addon3w" type="text" data-msg="Please enter your first name"/>
    </div>
     <div class="errorTxt alert alert-danger" style="display:none;height: 20px;"></div>
      </div>
      <input id="submitBtn" name="submitBtn" value="click" class="btn btn-warning center btn-block" type="submit" />
    </form>
  </body>

</html>

Here is a plunkr

0
votes

The validation is set to take place on field submission so the message will change on pressing submit. You can also change that behavior with validating exactly that field on change, add this to your code:

 $("#signupForm1").validate().element(':input[name="mail_person"]');

This will redo the validation every time you change(modify) the field. Better it will be to have it on blur and not on change. 

 $('input[name="mail_person"]').on('blur', function(){
    $("#signupForm1").validate().element(':input[name="mail_person"]');
 });

So whenever you leave the field you get validation done for that field. You can also extend this to support all fields if your form.