Tag Archive for jQuery

Distinct Validation using jQuery Validation

Using jquery validation is easier and much of a common practice which will take off the burden of validating bunch of form fields. The power of jquery validation comes into play where it allows us to write a custom validation methods and classes.

I was looking into using this power of custom methods for distinct validation for the bunch of form fields I was working on, when I came accross this site which illustrates the way of doing so. We could add our custom function/method which does the required validation for us and we could use this function in similar fashion as to other inbuilt jquery validation methods. Simple as that, Isn’t it? If not try sometime, It would be 🙂

jQuery.validator.addMethod("distinctValue", function(value, element, options) {
// get all the elements passed here with the same class
    var elems = $(element).parents('form').find(options[0]);
// the value of the current element
var valueToCompare = value;
// count
var matchesFound = 0;
// loop each element and compare its value with the current value
// and increase the count every time we find one
jQuery.each(elems, function(){
thisVal = $(this).val();
if(thisVal == valueToCompare){
matchesFound++;
}
});
// count should be either 0 or 1 max
if(this.optional(element) || matchesFound <= 1) {
        elems.removeClass('error');
        return true;
    } else {
        elems.addClass('error');
    }
}, jQuery.format("Please enter a Unique Value."));

So, this is the method that we have added which will check for distinct value with the matched class name that we pass as an argument. One advantage of using classname is we could use this validation for any number of fields that we wanted. The html form field should be fairly simple with only requiring the classname that we will be passing in above method.

<form name="customForm" id="customForm">
<p>
    <label for="field1">Field 1</label>
    <input id="field1" name="field1" class="distinctField" />
</p>
<p>
   <label for="field2">Field 2 </label>
   <input id="field2" name="field2" class="distinctField" />
</p>
</form>

Now, we will be using the regular jquery validation rules and methods with our custom method. We will be passing the classname for our custom method.

$("#customForm").validate({
 rules: {
      field1:{
           required: true,
           distinctValue: ['.distinctField']
      },
      field2:{
          required: true,
          distinctValue: ['.distinctField']
      }
 }
});

Variable scope in js and ajax function

Often, when we encounter a situation when the link has to be followed with some condition check in server, we could skip the form and use the simple a tag to navigate the link with javascript/ajax. You could simple use the ajax call to request the server file and then get the response and based on the response you could either follow the link or block it.

But in doing so, you may have to share the variable between javascript function and ajax function. This arises the variable scope issue in javascript. We have to use the scope operator to point the variable properly. In our case, we have defined the scope as var _this = this; . Now we could use this operator to access the js variable inside the ajax function.

The a tag will navigate the link by default so in order to block it we will use the onClick event. This event will fire and the link will be navigated if the response is true and our function returns either true or false based on the server response. And that’s that. Simple huh!! The code should be self explanatory. But just in case you need my help, you know where to find me else please drop a comment 🙂

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
function checkA() {
	var _this = this;
	var check;

	$.ajax({ 
		type: 'POST',
		url: 'checkhere.php',
		async: false,
		success: function (response) {			
			if(response) {
				_this.check = true;
			}else {
				_this.check = false;
			}
		}
	});
	
	return _this.check;
}
</script>
<a href="gohere.php" onclick="return checkA();">Follow Link with Check</a>
www.000webhost.com