Answers for "jquery validation"

jquery validation errorplacement

$(document).ready(function () {
    $('#add_client').validate({
        errorClass: 'validation_errors',
        debug: false,
        rules: {
            client_name: {
                required: true
            },
            client_address: {
                required: true
            },
            client_city: {
                required: true
            }
        },
        errorPlacement: function (error, element) {
            console.log('dd', element.attr("name"))
            if (element.attr("name") == "client_city") {
                error.appendTo("#messageBox");
            } else {
                error.insertAfter(element)
            }
        },
        messages: {
            client_name: {
                required: "The Client name is a required / mandatory field"
            },
            client_address: {
                required: "The Client address is a required / mandatory field"
            },
            client_city: {
                required: "The City is a required / mandatory field"
            },

        },
        submitHandler: () => {
        $('#send_form').on('click', submitFormHandler)
        $('#send_form').trigger('click')
        $('#terms-of-use').removeClass("checked")
        $('#terms').removeClass("checked")
      }
    });
});

jquery validation plugin

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/jquery.validate.min.js"></script>

jquery validation example

reference : https://www.sitepoint.com/basic-jquery-form-validation-tutorial/

// Wait for the DOM to be ready
$(function() {
  // Initialize form validation on the registration form.
  // It has the name attribute "registration"
  $("form[name='registration']").validate({
    // Specify validation rules
    rules: {
      // The key name on the left side is the name attribute
      // of an input field. Validation rules are defined
      // on the right side
      firstname: "required",
      lastname: "required",
      email: {
        required: true,
        // Specify that email should be validated
        // by the built-in "email" rule
        email: true
      },
      password: {
        required: true,
        minlength: 5
      }
    },
    // Specify validation error messages
    messages: {
      firstname: "Please enter your firstname",
      lastname: "Please enter your lastname",
      password: {
        required: "Please provide a password",
        minlength: "Your password must be at least 5 characters long"
      },
      email: "Please enter a valid email address"
    },
    // Make sure the form is submitted to the destination defined
    // in the "action" attribute of the form when valid
    submitHandler: function(form) {
      form.submit();
    }
  });
});

jquery form validation

$('form[id="second_form"]').validate({
  rules: {
    fname: 'required',
    lname: 'required',
    user_email: {
      required: true,
      email: true,
    },
    psword: {
      required: true,
      minlength: 8,
    }
  },
  messages: {
    fname: 'This field is required',
    lname: 'This field is required',
    user_email: 'Enter a valid email',
    psword: {
      minlength: 'Password must be at least 8 characters long'
    }
  },
  submitHandler: function(form) {
    form.submit();
  }
});

invoking jquery validator

$(document).ready(function () {

    $('#myform').validate({ // initialize the plugin
        // rules & options
    });

    $('#button').click(function() {
        if ($('#myform').valid()) {
            alert('form is valid - not submitted');
        } else {
            alert('form is not valid');
        }
    });

});

jquery form validation

function submitFunction(event){
	event.preventDefault();
}
$("#form_id").submit(submitFunction);