0

I'm using the JQuery-validate plugin to validate a form. So far I have the fields highlighted whenever an error is present. I want an alert to show indicating that there are errors that need to be corrected but I'm not sure where to add the alert. Wherever I add it to my existing code, it shows multiple times.

$(function() {

    $("form[id='changeAccountSettings']").validate({

      onclick: false,
      onkeyup: false,
      errorPlacement: function(error, element) {

        var n = element.attr("name");

        if (n == "first_name")
            element.attr("placeholder", "Please provide a first name");
        else if (n == "last_name")
            element.attr("placeholder", "Please provide a last name");  
        else if (n == "email")
      element.attr("placeholder", "Valid email address");
      else if (n == "cellphone")
            element.attr("placeholder", "Valid cellphone number");

    },
    rules: {
        first_name: {
            minlength: 2,
            required: true
        },
        last_name: {
            minlength: 2,
            required: true
        },
        email: {
            minlength: 6,
            required: true,
            email: true
        },
        cellphone: {
          minlength: 10,
          required: true,
          number: true
      },

    },
    highlight: function(element) {

        $(element).addClass('has_error');

    },
    unhighlight: function(element) {

        $(element).removeClass('has_error');
    },
    submitHandler: function(form) {
        form.submit();

    }

});
  });
Reez0
  • 2,512
  • 2
  • 17
  • 39
  • Did you check the docs or search SO yet? – Sparky Jun 02 '19 at 15:27
  • Look at the `invalidHandler` callback to trigger the "errors below" message and the `success` callback to hide it. – Sparky Jun 02 '19 at 15:33
  • Here is your solution: http://jsfiddle.net/mphsyk1j/ – Sparky Jun 02 '19 at 15:36
  • You also can't/shouldn't use the `placeholder` for the error message. It's really bad GUI, not what the user expects, and probably why it's working poorly. The `errorPlacement` callback tells the plugin where the messages are placed into your layout. The messages are normally HTML ` – Sparky Jun 02 '19 at 16:13

0 Answers0