$(function(){
var passwordLength = $('#penewpass').val().length;
if(passwordLength == 0){
$('#penewpass').next('.error').css('display', 'inline');
$('#penewpass').change(function(){ $(this).next('.error').css('display', 'none');
});
}
});
a_young_wife's_computerbook (Javascript and PHP)
JQuery validating email addresses
PHP:
<label class="label" for="email">E-mail: </label>
<input type="text" name="email" id="email" size="48" /><span class="error">please enter a valid e-mail address</span><br />
$regexEmail = '/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/';
var inputEmail = $(this).val( );
var resultEmail = regexEmail.test(inputEmail);
if(!resultEmail){
$(this).next('.error').css('display', inline');
}else
$(this).next('.error').css('display', 'none');
}
});
CSS:
.error {
display: none;
color: #FF0000;
font-size: 0.7em;
margin: 0px 0px 0px 5px;
}
JQuery focus function
Using this jQuery, the cursor can be placed wight into the form element that you would like the user to fill out.
(tabindex defines the order in which these elements should be selected based on clicking the Tab key)
Example 1:
<input type="text" name="user" size="24" tabindex="0"/>
$('input[tabindex="0"]).focus( );
(tabindex defines the order in which these elements should be selected based on clicking the Tab key)
Example 1:
<input type="text" name="user" size="24" tabindex="0"/>
$('input[tabindex="0"]).focus( );
JQuery a semitransparent "shade"
Creating a shaded background:
$('body').append('<div id="modalShade"></div>);
$('#modalShade').css('opacity', 0.7).fadeIn( );
$('body').append('<div id="modalShade"></div>);
$('#modalShade').css('opacity', 0.7).fadeIn( );
JQuery selecting and binding
The following selects all the anchor (link) tags that have a class="joy" and binds (joins) it to the "click" event:
$('a.joy').click(function( ) {
return false;
});
/* Close the click function with the return false; method to keep the link from trying to load another page into the browser */
$('a.joy').click(function( ) {
return false;
});
/* Close the click function with the return false; method to keep the link from trying to load another page into the browser */
JQuery select HTML DOM
To select text keyed-in by the user in a textbox eg. <input name="username" type="text" size="48"/>,
use:
$('input[name="username"]')
use:
$('input[name="username"]')
JQuery tips
To increase the efficiency of jQuery, these are some tips:
- Use a class or an id attribute to allow one to identify the item(s) more directly. eg. $('#id_name') or $('.class_name')
- Cache the selector that is long and used many times. eg. var link=$("div ul li a"); To use it type: $(link)
- Troubleshoot with Firebug (http://getfirebug.com/) and minify your code with the Google Closure Compiler(https://developers.google.com/closure/compiler/)
- Troubleshoot 2:Use jsFiddle(http://jsfiddle.net/) to test a jQuery code.
Subscribe to:
Posts (Atom)