JQuery validate not showing error

Question

for some reason having issues with JQuery validate even though I have used similar code previously. I have a simple form.

<form id="emailform" class="form-horizontal emailType" role="form">
    <div class="form-group">
        <label for="inputTitle" class="col-lg-4 control-label">Title</label>
        <div class="col-lg-8">
            <select class="form-control" id="inputTitle" name="inputTitle">
                <option value="">Please select...</option>
                <option value="Mr">Mr</option>
                <option value="Mrs">Mrs</option>
            </select>
        </div>
    </div>
    <div class="form-group">
        <label for="inputName" class="col-lg-4 control-label">First Name(s)</label>
        <div class="col-lg-8">
            <input type="text" class="form-control" id="inputName" name="inputName" placeholder="First Name(s)">
        </div>
    </div>
    <div class="form-group">
        <label for="inputSurname" class="col-lg-4 control-label">Surname</label>
        <div class="col-lg-8">
            <input type="text" class="form-control" id="inputSurname" name="inputSurname" placeholder="Surname">
        </div>
    </div>
    <div class="form-group">
        <label for="inputMethod" class="col-lg-4 control-label">Delivery Method</label>
        <div class="col-lg-8" id="radioAlign">
            <input type="radio" value="email" id="inputMethod" checked><span id="emailText">Email</span>
        </div>
    </div>
    <div class="form-group">
        <label for="inputEmail" class="col-lg-4 control-label">Email</label>
        <div class="col-lg-8">
            <input type="email" class="form-control" id="inputEmail" name="inputEmail" placeholder="Your Email">
        </div>
    </div>
    <div class="form-group">
        <label for="inputLinks" class="col-lg-4 control-label">Link to be sent</label>
        <div class="col-lg-8">
            <select class="form-control" id="inputLinks" name="inputLinks">
                <option value="img/default.jpg">Please select...</option>
                <option value="img/placeholder.jpg">Email1</option>
                <option value="img/placeholder2.jpg">Email2</option>
            </select>
        </div>
    </div>
    <div class="form-group">
        <div class="col-lg-offset-2 col-lg-10">
            <button type="submit" class="btn btn-default">
                Send Message
            </button>
        </div>
    </div>
</form>
<div id="error"></div>

I then have my validation.

$.validator.addMethod(
      "notEqualTo",
      function(elementValue,element,param) {
        return elementValue != param;
      },
      "Value cannot be {0}"
  );

  $.validator.addMethod("myCustomRule", function(value, element) {
    return /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{1,}))$/.test(value);
  }, "Please enter a valid email");

  var validator = $("#emailform").validate({
    errorPlacement: function (error, element) {
      $(element)
          .closest("form")
          .find("#error")
          .append(error);
    },
    rules: {
      inputTitle: {
        required: true,
        notEqualTo: "Please select..."
      },
      inputName: {
        required: true,
        minlength: 1
      },
      inputSurname: {
        required: true,
        minlength: 1
      },
      inputEmail: {
        required: true,
        myCustomRule: true,
        minlength: 5,
        email: true
      },
      inputLinks: {
        required: true,
        notEqualTo: "Please select..."
      }
    },
    messages: {
      inputName: {
        minlength: jQuery.validator.format("Please enter a valid name")
      },
      inputSurname: {
        minlength: jQuery.validator.format("Please enter a valid surname")
      },
      inputEmail: {
        minlength: jQuery.validator.format("Your email address is to short")
      }
    },
    submitHandler: function(){
      //Do success stuff here
      return true;
    },
    invalidHandler: function(event,validator) {
      //do error stuff here
      return false;
    }
  });

If I submit the form, my error message does not display. Instead, the input gets highlighted with a blue border.

Is there any reason my errors do not display?

Thanks

Likely, you've broken the default functionality with your custom errorPlacement function. Remove the errorPlacement option and see what happens. — Sparky
– Sparky, Commented Jul 22, 2015 at 16:06

Bhavin Solanki · Accepted Answer · 2015-07-22 12:48:23Z

I have update your validation massage code;

Please check this,

$.validator.addMethod(
      "notEqualTo",
      function(elementValue,element,param) {
        return elementValue != param;
      },
      "Value cannot be {0}"
  );

  $.validator.addMethod("myCustomRule", function(value, element) {
    return /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{1,}))$/.test(value);
  }, "Please enter a valid email");

  var validator = $("#emailform").validate({
    errorPlacement: function (error, element) {
      $(element)
          .closest("form")
          .find("#error")
          .append(error);
    },
    rules: {
      inputTitle: {
        required: true,
        notEqualTo: "Please select..."
      },
      inputName: {
        required: true,
        minlength: 1
      },
      inputSurname: {
        required: true,
        minlength: 1
      },
      inputEmail: {
        required: true,
        myCustomRule: true,
        minlength: 5,
        email: true
      },
      inputLinks: {
        required: true,
        notEqualTo: "Please select..."
      }
    },
    messages: {
      inputName: {
        minlength: jQuery.validator.format("Please enter a valid name")
      },
      inputSurname: {
        minlength: jQuery.validator.format("Please enter a valid surname")
      },
      inputEmail: {
        minlength: jQuery.validator.format("Your email address is to short")
      }
    },
    errorPlacement: function (label, element) { // render error placement for each input type   
                    $('<span class="error"></span>').insertAfter(element).append(label)
                    var parent = $(element).parent('.input-with-icon');
                    parent.removeClass('success-control').addClass('error-control');  
                },

                highlight: function (element) { // hightlight error inputs
                    var parent = $(element).parent();
                    parent.removeClass('success-control').addClass('error-control'); 

                },

                unhighlight: function (element) { // revert the change done by hightlight
                    var parent = $(element).parent();
                    parent.removeClass('error-control').addClass('success-control'); 
                },
    submitHandler: function(){
      //Do success stuff here
      return true;
    },
    invalidHandler: function(event,validator) {
      //do error stuff here
      return false;
    }
  });

does it work or not? let me know

So explain WHY this works. Exactly what part did you fix? Also, you've erroneously included the errorPlacement option twice... one is going to be ignored.

Collectives™ on Stack Overflow

JQuery validate not showing error

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related