troubleshooting Question

JQuery textarea Validation on select onchange

Avatar of atljarman
atljarman asked on
JavaScriptWeb DevelopmentjQuery
13 Comments1 Solution3102 ViewsLast Modified:
Hi,

I have a form with a select box and a textarea.  Users are required to enter information in the textarea if they enter 'No' or 'N/A' in the select box (or reduce the text in the textarea if over 250 characters).  So the current validation is this if form blank:
1. User clicks submit button
2. Select box validation requires change
3. User selects a value validation goes away (onchange event - I think)
4. User sees no issues, click submit again.
5. User selected No and sees that they must enter a comment in the textarea (which they didn't know before clicking the button) and are frustrated
6. User calls managment about extra clicking on form.

What I would like to do is that when the user selects the value in #3 the validation is fired on the textarea so the user automatically sees that they must enter in a value.  Has anyone done this?

<script> 
$().ready(function() {
   // validate the comment form when it is submitted
    $('textarea').autosize();
    $('#FORMORAQMS006' ).validate({
             rules: { Q1Comments: { required: function(){
										if($("select[name=Q1Answer]").val() == 'No' || $("select[name=Q1Answer]").val() == 'N/A'){
											return true;
											}
										else
											{
										return false;
										}
														}
			 , maxlength: 250 }
                      ,Q1Answer: { required: true }
} 
             , messages: { Q1Comments: { required: 'Enter a comment', maxlength: jQuery.format('Enter at most {0} characters') }}
     });
});
</script> 
</head>
<body>

<form id='FORM006' method='POST' action=''>

<p>
<select id='Q1Answer' name='Q1Answer' title='Please select a response' alt='Q1 Answer' class='dropdownfield' required>
	<option value=''>Please Select</option>
	<option value='Yes'>Yes</option>
	<option value='No'>No</option>
	<option value='N/A'>N/A</option>
   </select>
</p>
<p>   <textarea id='Q1Comments' name='Q1Comments' alt='Q1Comments' title='Enter any comments' class='textarea expand'></textarea></p>

<p><input class='submit' type='submit' value='Submit'/></p>

</form>
Join the community to see this answer!
Join our exclusive community to see this answer & millions of others.
Unlock 1 Answer and 13 Comments.
Join the Community
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 13 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros