Archive

Archive for the ‘Java Script’ Category

Today’s Learning: Conditional validations using jquery

January 15, 2013 1 comment

Generally we have validations set in validation rules object. This way we can set static rules for a field. What if we have to validate a field depending upon input of other field (conditional validation).

For example: if area-code is entered, make phone field mandatory etc.

Here is a javascript code which adds validation rules according to the condition:

//The validator object

var validatorObject = {

rules: {

‘first_field_id’: {    

required: false,

minlength: 1,

maxlength: 50

 },

‘second_field_id’: {         

required: false,

minlength: 1,

maxlength: 25

}

}

}

$(“#first_field_id”).focusout(function(){

          var newRule = {

                   required: {

                             depends: function(element) {

                              //check if first field is set        

if ($(this).val() != ”) {

                                                return true;

                                      }else{

                                                return false;

                                      }

                             }

                   }

          };

          $(“#second_field_id”).rules(‘add’,newRule);

          $(“#second_field_id”).valid();

}

Now validate the form

$(“#form_id”).validate(validatorObject);

Advertisements
Categories: Java Script

Today’s Learning: binding more than one events in jquery

November 21, 2012 Leave a comment

To call a custom event handler when an event fires, we can use “.bind()” jquery method as described below :

$(‘#foo’).bind(‘click’, function(){
//do something on click event fire
});

To bind more than one events to one element, we can include each event in “.bind()” method separated by space :

$(‘#foo’).bind(‘click mouseover keyup …’, function(){
//do something on event fire
});

To bind multiple event handlers to one element (As of jQuery 1.4) :

$(‘#foo’).bind({
focusout: function() {
// do something on focusout
},
mouseover: function() {
// do something on mouseover
},
click: function() {
// do something on click
}
});

Categories: Java Script Tags: ,

IE7.0-Expected Identifier or String…Bang the bug

December 31, 2008 1 comment

Hi,

While testing my application, I was very happy by getting smooth run on the FireFox and Safari.  But when I tested that on IE7.0, I was banged with the error popup-

“Expected identifier or string”

on the very first page of the application. I started trying out putting few alerts on the very first javascript file loaded, but failed. After digging a lot, I found the way to get-rid-of this issue. Here is the soultion-

The problem JavaScript code was-

1    function txtCellEditor(){
2        var txt = new YAHOO.widget.TextboxCellEditor({
3                  asyncSubmitter: asyncUpdate,
4                  validator:YAHOO.widget.DataTable.validateNumber,
5                  });
6        return txt;
7    }

The main problem was the “,”(comma) at the line 4. I removed the comma and the application started working fine on IE7 also.

Actually for IE, there should be no comma after the function closing(after the braces{}), or the parameters passed to the functions or the class constructors. IE considers that as a new line.

Enjoy debugging……

Categories: Java Script

JavaScript Document Object Model

May 29, 2007 Leave a comment

Javascript DOM

Categories: Java Script

Toggle the Fields

December 7, 2006 1 comment

While designing the web pages, sometimes you need to show the particular input field or labels or other page element, and show them on some event like click of a button, change the option from combobox ect.

One idea is make the field to be toggled, invisible by default and make it visible on that particular event. Here I am presenting some sample code, to achieve this :

<script language=”javascript” type=”text/javascript”>

function toggle_field()
{
var changed = document.getElementById(‘enter_card’);
var card1 = document.getElementById(‘hide_field1’);
var card2 = document.getElementById(‘hide_field2’);
if(changed.options[changed.options.selectedIndex].value)
{
card1.style.display = ‘block’;
card2.style.display = ‘block’;

}
else
{
card1.style.display = ‘none’;
card2.style.display = ‘none’;

}
}

</script>

<html><body>

<table>

<tr>

<td >Select option to show hidden elements:</td>
<td>
<select id=”enter_card” name=”card_type” onchange=”toggle_field()”>
<option value=””>Choose….</option>
<option value=”Option1″>Option1</option>
<option value=”Option2″>Option2</option>
<option value=”Option3″>Option3</option>
</select>
</td>
</tr>
<tr>
<td><div id=”hide_field1″ style=”display: none;”>Card Number:</div></td>
<td><div id=”hide_field2″ style=”display: none;”><input type=”text” name =”card_number” value=”” size=”40″></div></td>
</tr>

</body></html>

The label “card number” and the input field “card_number” will be invisible by default. When somebody selects any option from the dropdown box, the function toggle_field() makes the invisible fields to visible and vice-versa. This code will help in toggling the page elements. Cheers…

Categories: Java Script