RE : Jquery

Hi,

I would like to do the below

1) Validate Attached HTML page through J query (Validation will be customized and display error message in DIV tag)
If validation code is customized it will be good for me if i add more form elements i can do from my end.
Empty validation, numeric validations, email validations, Phone and mobile only one is mandatory, other general form validations.

3) Once all validation pass, call ASP page through J query without refreshing page
4) HTML page will show success message/error message on the basis of ASP page processing in DIV tag by hiding form

I will be very helpful for me for providing the same.

Thanks
missingcode-form.txt
rajneesh1978Asked:
Who is Participating?
 
Steve KrileCommented:
Sure...sorry, been a bit distracted recently  :P

Here is a working example of the code required for client-side validation.  I've set up special rules for the mobile and areacode/phone fields to "toggle" the requirement based on which field the user completes.

I've removed the asterix (em) from the form.  I found it visually confusing.  Feel free to add them back, but it would be my preferences only to warn a user if they had done something wrong - and they won't have done something wrong unless they try to submit the form before the required fields are completed.  And since we have conditionals on the phone fields, i figured the turning on and off of the required indicators would be a bit disorienting.
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

		<script src="jquery-latest.js"></script>
		<script type="text/javascript" src="jquery.validate.js"></script>
		<style type="text/css">
			* { font-family: Verdana; font-size: .97em; }
			label { width: 10em; float: left; }
			label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
			p { clear: both; }
			.submit { margin-left: 12em; }

			table {font-size:1em;}

		</style>


	</head>

	<body>

		<form class="cmxform" id="commentForm" method="get" action="">
			<fieldset>
		 		<legend>A simple comment form with submit validation and default messages</legend>
		 		<table>
		 			<tr>
		 				<td><label for="cname">Name</label></td>
		 				<td><input id="cname" name="name" size="25" class="required" minlength="2" /></td>
		 			</tr>
		 			<tr>
		 				<td><label for="mobile">Mobile no</label></td>
		 				<td><input id="mobile" name="mobile" size="25" class="required number" /></td>
		 			</tr>
		 			<tr>
		 				<td><label for="areacode">Phone no.</label></td>
		 				<td>
		 					<table>
		 						<tr>
		 							<td>Area Code</td>
		 							<td>Number</td>
		 						</tr>
		 						<tr>
		 							<td><input id="areacode" name="areacode" class="required number" name="areacode" maxlength="4" size="4" type="TEXT" /></td>
		 							<td><input id="phone" name="phone" class="required number" maxlength="8" size="10" type="TEXT" /></td>
		 						</tr>
		 					</table>
		 				</td>
		 			</tr>
		 			<tr>
		 				<td><label for="email">eMail</label></td>
		 				<td><input id="email" name="email" class="required email" type="text" /></td>
		 			</tr>
		 			<tr>
		 				<td></td>
		 				<td><input class="submit" value="Submit" type="submit" /></td>
		 			</tr>
		 		</table>

			</fieldset>
		</form>

		<script>
			$(document).ready(function(){
				$("#commentForm").validate({
					rules: {
						mobile: {
							required : function(){
								return ( ($("#phone").val()=="") && ($("#areacode").val()==""));
							}
						},
						phone: {
							required : function(){
								return ($("#mobile").val()=="");
							}
						},
						areacode: {
							required : function(){
								return ($("#mobile").val()=="");
							}
						}
					},
					messages: {
						phone: {
							required: "This field is required",
							number: "Please enter only numbers - no spaces, dashes or special symbols"
						},
						areacode: {
							required: "This field is required",
							number: "Please enter only numbers - no spaces, dashes or special symbols"
						},
						mobile: {
							required: "This field is required",
							number: "Please enter only numbers - no spaces, dashes or special symbols"
						}
					}
				});
			});
		</script>

	</body>
</html>

Open in new window

0
 
Steve KrileCommented:
There is a very nice plugin that you should consider going with for these requirements.  There is a lot to know about this, but this should get you started.

http://docs.jquery.com/Plugins/Validation

0
 
rajneesh1978Author Commented:
Hi Skrile,

Thanks for your continuous help

I already gone through the J query site and other external link.

I am facing the problem like i have 4 form elements like name, email, mobile, areacode and phoneno. I would like to validate one of them from phone and mobile and need to flash common error message for both.

Area code and phone number is 2 separate text box in form so its validating as single entity so i am getting 2 error message if i leave it empty,

If you want i can post my code for your reference.
0
Cloud Class® Course: Microsoft Office 2010

This course will introduce you to the interfaces and features of Microsoft Office 2010 Word, Excel, PowerPoint, Outlook, and Access. You will learn about the features that are shared between all products in the Office suite, as well as the new features that are product specific.

 
Steve KrileCommented:
Sure, that would help us isolate what is going on.
0
 
rajneesh1978Author Commented:
Please find the attached, below is my requirement

1) Mobile and Phone no (Area code and number)
one is mandatory to fill
Message for field is required should display as combined for Phone no

2) Once all validation pass i would like to call my ASP page for server side validation and show the message according to success/error on my form.

let me know if you required any other information
sample.html
jquery-latest.js
jquery.validate.js
0
 
rajneesh1978Author Commented:
Any update?
0
 
rajneesh1978Author Commented:
Thanks for your update.

Can you please let me know how can i put common message for Area code and phone number
0
 
rajneesh1978Author Commented:
I have another question for Jquery which i have already posted but no satisfied reply yet.

Can you please help to check that question and reply in that forum.
0
 
rajneesh1978Author Commented:
Any update,

Reply is very slow can you please help to reply soon as its very urgent.

Thanks for your understanding
0
 
rajneesh1978Author Commented:
Why the response is so slow.

Please reply the question as i have subscribed to get good service
0
 
Steve KrileCommented:
Sorry.  I did answer your original question.  You followed that question with another about creating a custom  validation tie-ing two control fields in to one rule.  

Also, you asked that I answer a different question but didn't post which "other" question you wanted me to answer (with a link) and I didn't have time to track it down.

So here is my suggestion:

1.  Mark this as Answered.
2.  Ask a question using the code sample I have given you above about how to validate two controls together (dependent validation).
3.  Go to your other question that is not getting answered and Request Attention.  This will bubble it to the top of the unanswered list and I will be able to find it (along with other experts).

0
 
rajneesh1978Author Commented:
Satisfied
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.