Tag Archives: jQuery

jQuery: Form validation with keyup examples

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<script>
	$(document).ready(function(){

		$("#txtFirstName").keyup(function() {
		
			 $('span.error').hide();

			var firstName = $(this).val();
			// allow '.','-' and space
			var firstNameRegex =/^[A-Za-z\s\'\-]*$/; //  /^[A-Za-z\s\'\-]*$/; //^[a-z\s]*$ ==== ^[A-Za-z\s][\.]{0,1}[A-Za-z\s]{0,}$"
			
			console.log(firstName);

			if(firstNameRegex.test(firstName)) 
			{
				$(this).after('<span class="error">Valid</span>');
			} 
			else 
			{
				$(this).after('<span class="error">Wrong!</span>');
			}
		});
	

		$("#txtEmail").keyup(function() {
		
			 $('span.error').hide();

			var email = $(this).val();
			var emailRegex = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
			
			console.log(email);

			if(emailRegex.test(email)) 
			{
				$(this).after('<span class="error">Valid</span>');
			} 
			else 
			{
				$(this).after('<span class="error">Wrong!</span>');
			}
		});



		$("#btnSubmit").click(function() {

			$('span.error').hide();

			// note that toUpperCase() is used, not perfect solution
			var postalCode = ($("#txtPostalCode1").val() + $("#txtPostalCode2").val()).toUpperCase();
			var postalCodeRegex = /^[ABCEGHJKLMNPRSTVXY]\d[ABCEGHJKLMNPRSTVWXYZ]?\d[ABCEGHJKLMNPRSTVWXYZ]\d$/;
			var btnSubmit = $("#btnSubmit");

			console.log(postalCode);

			if(postalCodeRegex.test(postalCode)) 
			{
				$(btnSubmit).after('<span class="error">Valid</span>');
			} 
			else 
			{
				$(btnSubmit).after('<span class="error">Wrong!</span>');
			}
		});
	})
	</script>
</head>

<body>
		First name: 
		<input type="text" name="txtFirstName" id="txtFirstName" />
		<br />
		<br />
		Email: <input type="text" name="txtEmail" id="txtEmail" />
		<br />
		<br />
		Postal Code: 
		<input type="text" name="txtPostalCode1" id="txtPostalCode1" maxlength="3" style="width:30px; margin-right:10px;" />
		<input type="text" name="txtPostalCode2" id="txtPostalCode2" maxlength="3" style="width:30px; margin-right:10px;" />
		<input type="submit" value="Submit" id="btnSubmit" />
</body>
</html>

jQuery – focus on next input

HTML

<asp:TextBox ID="txtPostalCodeFSA" runat="server" CssClass="postalCode" MaxLength="3" />
<asp:TextBox ID="txtPostalCodeLDU" runat="server" CssClass="postalCode" MaxLength="3" />

jQuery

$(document).ready(function () {
	$('.postalCode').keyup(function () {
		if (this.value.length == this.maxLength) {
			$(this).next('.postalCode').focus();
		}
	});
});

Source: Stack Overflow
Working example: jsFiddle

jQuery ColorBox: Remove close button from popup

Open colorbox.css and set #cboxClose to display none. You need to use !important to override an inline style that sets it to display block.

Code:
#cboxClose{right:0; background-position:-100px -25px; display:none !important;}#cboxClose.hover{background-position:-100px 0px;}

Also, if you are using the slideshow and want to shift it over to the right edge, change its right position to zero

Code:
.cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px; right:0;}.cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px;}.cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px; right:0;}.cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px;}

You could go through the original source code (not that minimized mess) and remove the close button but this way is much easier.

 

jQuery simple AJAX call (XML as output)

<script type="text/javascript">    function AddTag()    {           $('#<%= btnAddTag.ClientID %>').text('loading...');        $.ajax({                 url: "/webService/Content.asmx/SuggestKeywordsForTopicContent",                 //type: "POST",                 dataType: "xml",                data: {                        content: $('#<%= DetailsTextBox.ClientID %>').val(),                        recordCount: 20                },                success: function(xmlResponse)                {                     $('#<%= btnAddTag.ClientID %>').text('Add Tag');                    $(xmlResponse).find('Text').each(function(){                        var arrayVal =     $(this).text();                        alert(arrayVal);                    });                }              });    }</script>