jQuery Validation : Special Features Document

Order of the rules definition matters

# in CoffeeScript
"user[password_confirmation]":
  required: true
  equalTo: $('#user_password')
  minlength: 8
  maxlength: 16

and this behave different

# in CoffeeScript
"user[password_confirmation]":
  required: true
  minlength: 8
  maxlength: 16
  equalTo: $('#user_password')

the former one validates the password length at last, whereas later one validates integrity.

Highlight / Unhighlight

Can highlight fields and unhighlight when field is valid.

# in CoffeeScript
highlight: (element) ->
  $(element).closest('.form-group').addClass 'has-signup-error'
  return
unhighlight: (element) ->
  $(element).closest('.form-group').removeClass 'has-signup-error'
  return

 

# in CoffeeScript
# Trigger validation when focus is lost from the field
$(".new_user input, .new_user select").focusout (element) ->
  $el = $(this)
  if !$el.is('select') and element.value == '' and element.defaultValue == ''
    # for untouched text fields, don't validate on blur
    return
  $el.valid()
  return

 

you can also customize the regex to validate email fields

$.validator.methods.email = function( value, element ) {
  return this.optional( element ) || /[a-z]+@[a-z]+\.[a-z]+/.test( value );
};

See https://jqueryvalidation.org/jQuery.validator.methods/

 

Validation of hidden fields

This feature will be useful specially for checkbox. You usually decorate your checkboxes and radios using CSS and hide the original input field. By default jQuery Validation skips validation of hidden items.

You can use the :not() selector combined with :hidden to activate validation for specific hidden items:

ignore: ":hidden:not(.my_item)"

Example:

$('.edit_vehicle_owner').validate({
  ignore: ":hidden:not(#vehicle_owner_agreed_to_terms_and_condition)",
  
  rules: {
    "vehicle_owner[first_name]": {
      required: true
    },
    "vehicle_owner[agreed_to_terms_and_condition]": {
      required: true,
    }
});
Advertisements

JavaScript : jQuery : Best way to add Event Handlers makes debuging easy

I work on Rails project with 20+ javascript files. I even have implement the Javascript/script response using the js.erb template. Also, I am using jQuery instead of the vanillaJs to code easily. These days I figured out that in developer mode in browsers its impossible to find the actual event handler function by pointing at any node element. It was awesomely easy when there was no jQuery or any other library. Continue reading

Browser support for HTTP request methods like PUT/DELETE/PATCH

HTML forms (up to HTML version 4 and XHTML 1) only support GET and POST as HTTP request methods. A workaround for this is to tunnel other methods through POST by using a hidden form field which is read by the server and the request dispatched accordingly.

However, GET, POST, PUT and DELETE are supported by the implementations of XMLHttpRequest (i.e. AJAX calls) in all the major web browsers (IE, Firefox, Safari, Chrome, Opera).

Sources:

http://stackoverflow.com/questions/165779/are-the-put-delete-head-etc-methods-available-in-most-web-browsers

Ruby On Rails: ClientSideValidation : validation message persists after you change value programaticallyils

You use Rails4ClientSideValidation gem to validate you forms.
 

Problem:

When you programatically change the values of the required fields or any fields with some sort of validation such as ’email’ or ‘phone_number’, the validation message does not disappear.
Continue reading