Solved

JQuery Validation Comment for Text Field

Posted on 2013-11-13
23
358 Views
Last Modified: 2013-12-15
HI,

I have a form with about 50 questions in repeating format.  If they select "no" in the drop down they are required to add a comment in the respective comment field.  I have the code below for this that works, but I think there has to be a better way. For example, it would seem that you would be able to look at all the questions that are dropdows (maybe add a class to it or use the drowdownfield class) then assign the id of that question to a variable.  Then that variable could be used so that 100 functions in js would only be 2 functions.  I'm not sure if this is possible and is the purpose of my question.

I'm just not sure if this is possible or how to implement.

form fields:

                    <div class='Section'>
                        <div class='qSection'>
                                <div class='numberLabel'>
                                1.1
                                </div>
                            <div class='mediumLabel'>
                                <label>Question 1.1                                </label>
                            </div>
                                <div class='auditselectionField'>
                                    <select id='Q1_1Answer' alt='1_1Answer' title='Please select.' alt='Q1_1' class='dropdownfield answer' required>
                                        <option value=''>Please Select</option>
                                        <option value='Yes'>Yes</option>
                                        <option value='No'>No</option>
                                        <option value='N/A'>N/A</option>
                                    </select>
                                </div>
                                <div class='commentsLabel'>
                                    <label for='Q1_1Findings'><span id='lblQ1_1Findings'  class='dynamicLabel'>Findings:</span></label>
                                </div>
                                <div class='mediumField'>
                                    <textarea id='Q1_1Findings' title='Q1.1 Findings.' alt='Q1.1 Findings' class='textarea'></textarea>
                                </div>
                            <div class='clearBoth'></div>
                        </div>
                        <div class='qSection'>
                                <div class='numberLabel'>
                                1.2
                                </div>
                            <div class='mediumLabel'>
                                <label>Q 1.2</label>
                            </div>
                                <div class='auditselectionField'>
                                    <select id='Q1_2Answer' alt='1_2Answer' title='Please select.' alt='Q1_2' class='dropdownfield answer' required>
                                        <option value=''>Please Select</option>
                                        <option value='Yes'>Yes</option>
                                        <option value='No'>No</option>
                                        <option value='N/A'>N/A</option>
                                    </select>
                                </div>
                                <div class='commentsLabel'>
                                    <label for='Q1_2Findings'><span id='lblQ1_2Findings'  class='dynamicLabel'>Findings:</span></label>
                                </div>
                                <div class='mediumField'>
                                    <textarea id='Q1_2Findings' title='Q1.2 Findings.' alt='Q1.2 Findings' class='textarea'></textarea>
                                </div>
                            <div class='clearBoth'></div>
                        </div>

Open in new window


js:
    $(function() {
      $('#Q1_1Answer').change(function() {
        if ($('#Q1_1Findings').val() == '' && ($(this).val() == 'No' )) {
          $('#Q1_1FindingsReq').remove();
          $('#Q1_1Findings').after("<div id='Q1_1FindingsReq' class='reqcomment'>Please enter any findings.</div>");
        }
        else {
          $('#Q1_1FindingsReq').remove();
        }
      });
    });
    $('#Q1_1Findings').change(function() {
        if ($(this).val() == '') {
          $('#Q1_1FindingsReq').remove();
          $('#Q1_1Findings').after("<div id='Q1_1FindingsReq' class='reqcomment'>" + $('#Q1_1Findings').attr('title') + '</div>');
        }
        else {
          $('#Q1_1FindingsReq').remove();
        }
    });
    $(function() {
      $('#Q1_2Answer').change(function() {
        if ($('#Q1_2Findings').val() == '' && ($(this).val() == 'No' )) {
          $('#Q1_2FindingsReq').remove();
          $('#Q1_2Findings').after("<div id='Q1_2FindingsReq' class='reqcomment'>Please enter any findings.</div>");
        }
        else {
          $('#Q1_2FindingsReq').remove();
        }
      });
    });
    $('#Q1_2Findings').change(function() {
        if ($(this).val() == '') {
          $('#Q1_2FindingsReq').remove();
          $('#Q1_2Findings').after("<div id='Q1_2FindingsReq' class='reqcomment'>" + $('#Q1_2Findings').attr('title') + '</div>');
        }
        else {
          $('#Q1_2FindingsReq').remove();
        }
    });
//... 
});

Open in new window

0
Comment
Question by:atljarman
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 11
  • 10
23 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 39644627
should do the thing :
	$(function() {

		$('select[id$=Answer]').change(function() {
			var start_by = $(this).attr("id").substr(0,4) + "Findings";
			if ($('#' + start_by).val() == '' && ($(this).val() == 'No' )) {
				$('#' + start_by + 'Req').remove();
				$('#' + start_by).after("<div id='" + start_by + "Req' class='reqcomment'>Please enter any findings.</div>");
			}
			else {
				$('#' + start_by + 'FindingsReq').remove();
			}
		});

		$('textarea[id$=Findings]').change(function() {
			var start_by = $(this).attr("id").substr(0,4) + "Findings";
			if ($(this).val() == '') {
				$('#' + start_by + 'Req').remove();
				$('#Q' + start_by).after("<div id='" + start_by + "Req' class='reqcomment'>" + $('#' + start_by).attr('title') + '</div>');
			}
			else {
				$('#' + start_by + 'Req').remove();
			}
		});

	});

Open in new window

0
 

Author Comment

by:atljarman
ID: 39650054
This is what worked except the no on load with a blank comment doesn't bring up the alert.  Any thoughts?

jq(function() {

		jq('select[id$=Answer]').change(function() {
			var start_by = jq(this).attr("id").replace("Answer", "") + "Findings";
			
			if (jq('#' + start_by).val() == '' && (jq(this).val() == 'No' )) {
				jq('#' + start_by + 'FindingsReq').remove();
				jq('#' + start_by).after("<div id='" + start_by + "FindingsReq' class='reqcomment'>Please enter findings.</div>");
			}
			else {
				jq('#' + start_by + 'FindingsReq').remove();
			}
		});

		jq('textarea[id$=Findings]').change(function() {
		
			var start_by = jq(this).attr("id").replace("Findings", "") + "Findings";
			var answer_by = jq(this).attr("id").replace("Findings", "") + "Answer";
			
			if (jq(this).val() == '' && jq('#' + answer_by).val() == 'No') {
				jq('#' + start_by + 'FindingsReq').remove();
				jq('#' + start_by).after("<div id='" + start_by + "FindingsReq' class='reqcomment'>Please enter findings.</div>");
			}
			else {
				jq('#' + start_by + 'FindingsReq').remove();
			}
		});

	}); 

Open in new window

0
 
LVL 82

Expert Comment

by:leakim971
ID: 39650057
I'm not sure to understand...

Have you got this issue with your huge code too?
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:atljarman
ID: 39650776
No erorrs in the code.  I just refresh the page and when there is a No selected and the textarea is blank, the javascript doesn't fire and put the required comment below the textarea.  Everything else works fine.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39650918
If you put back your previous code, do you have the same problem?
0
 

Author Comment

by:atljarman
ID: 39651014
Nope.... doesn't do it, so must have been an error on my original concept.  Do you have any thoughts on how to check on page load for all of the Answer fields if they are no and the Field is blank to add the text.  I've tried this:

		jq('select[id$=Answer]').function() {
			var start_by = jq(this).attr("id").replace("Answer", "") + "Findings";
			
			if (jq('#' + start_by).val() == '' && (jq(this).val() == 'No' )) {
				jq('#' + start_by + 'FindingsReq').remove();
				jq('#' + start_by).after("<div id='" + start_by + "FindingsReq' class='reqcomment'>Please enter any auditor findings for this element in the words of the requirement, SOP and/or checklist.</div>");
			}
			else {
				jq('#' + start_by + 'FindingsReq').remove();
			}
		});

Open in new window


but doesn't work.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39651021
Using :
jq('select[id$=Answer]').each(function() {
    $(this).trigger("change");
})

Open in new window


jq(function() {

		jq('select[id$=Answer]').change(function() {
			var start_by = jq(this).attr("id").replace("Answer", "") + "Findings";
			
			if (jq('#' + start_by).val() == '' && (jq(this).val() == 'No' )) {
				jq('#' + start_by + 'FindingsReq').remove();
				jq('#' + start_by).after("<div id='" + start_by + "FindingsReq' class='reqcomment'>Please enter findings.</div>");
			}
			else {
				jq('#' + start_by + 'FindingsReq').remove();
			}
		});

		jq('textarea[id$=Findings]').change(function() {
		
			var start_by = jq(this).attr("id").replace("Findings", "") + "Findings";
			var answer_by = jq(this).attr("id").replace("Findings", "") + "Answer";
			
			if (jq(this).val() == '' && jq('#' + answer_by).val() == 'No') {
				jq('#' + start_by + 'FindingsReq').remove();
				jq('#' + start_by).after("<div id='" + start_by + "FindingsReq' class='reqcomment'>Please enter findings.</div>");
			}
			else {
				jq('#' + start_by + 'FindingsReq').remove();
			}
		});

jq('select[id$=Answer]').each(function() {
    $(this).trigger("change");
});
	}); 

Open in new window

0
 

Author Comment

by:atljarman
ID: 39651051
That code makes sense to me but on refresh there's no change.

BTW... $(this).trigger("change");
was changed to jq(this).trigger("change");

Because it threw an error.  Just didn't want you to think that was the cause.  What you saying is that on load for each one of these id that end with Answer trigger a change for that field.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39651057
be sure the code run placing an alert("ok") between line 3-4
0
 

Author Comment

by:atljarman
ID: 39651067
Annoying but effective to find that the code is firing.  Clicking ok 30-50 times is fun!

Yeah, ok came up but the text is not appearing below the dropdown.
0
 

Author Comment

by:atljarman
ID: 39651073
Does the current id need to be passed to the function?  If so, how would you do that?
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39651085
jq(this).attr("id")

please provide a link to your page
0
 

Author Comment

by:atljarman
ID: 39651362
Looks like the alert if firing before the page is loaded.  My guess is that the trigger needs to go behind a .ready but I tried that and it didn't work.  I'm not able to provide access to the page.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39651377
you've n ajax call somewhere, call the whole script once you ajax call is done and you build the content of the page from the data of the ajax call

jq.ajax({

success: function(data) {
    // process data, build dropdown, textarea
    // process data, build dropdown, textarea
    // process data, build dropdown, textarea
    // process data, build dropdown, textarea
    // end
    // and now 


		jq('select[id$=Answer]').change(function() {
			var start_by = jq(this).attr("id").replace("Answer", "") + "Findings";
			
			if (jq('#' + start_by).val() == '' && (jq(this).val() == 'No' )) {
				jq('#' + start_by + 'FindingsReq').remove();
				jq('#' + start_by).after("<div id='" + start_by + "FindingsReq' class='reqcomment'>Please enter findings.</div>");
			}
			else {
				jq('#' + start_by + 'FindingsReq').remove();
			}
		});

		jq('textarea[id$=Findings]').change(function() {
		
			var start_by = jq(this).attr("id").replace("Findings", "") + "Findings";
			var answer_by = jq(this).attr("id").replace("Findings", "") + "Answer";
			
			if (jq(this).val() == '' && jq('#' + answer_by).val() == 'No') {
				jq('#' + start_by + 'FindingsReq').remove();
				jq('#' + start_by).after("<div id='" + start_by + "FindingsReq' class='reqcomment'>Please enter findings.</div>");
			}
			else {
				jq('#' + start_by + 'FindingsReq').remove();
			}
		});

jq('select[id$=Answer]').each(function() {
    $(this).trigger("change");
});

}

Open in new window

0
 

Author Comment

by:atljarman
ID: 39652012
Ok.  I run the code below.  Kind of funny... if you run the code, the text shows up under the correct textarea until you hit ok on teh alert button, then it disappears.

Just confirmed by commenting out the other lines of code because the other functions are writing over the one that makes the text appear.

jq(window).load(function(){

		jq('select[id$=Answer]').change(function() {
			var start_by = jq(this).attr("id").replace("Answer", "") + "Findings";
			
			if (jq('#' + start_by).val() == '' && (jq(this).val() == 'No' )) {
				jq('#' + start_by + 'FindingsReq').remove();
				jq('#' + start_by).after("<div id='" + start_by + "FindingsReq' class='reqcomment'>Please enter any findings.</div>");
			}
			else {
				jq('#' + start_by + 'FindingsReq').remove();
			}
		});

		jq('textarea[id$=Findings]').change(function() {
		
			var start_by = jq(this).attr("id").replace("Findings", "") + "Findings";
			var answer_by = jq(this).attr("id").replace("Findings", "") + "Answer";
			
			if (jq(this).val() == '' && jq('#' + answer_by).val() == 'No') {
				jq('#' + start_by + 'FindingsReq').remove();
				jq('#' + start_by).after("<div id='" + start_by + "FindingsReq' class='reqcomment'>Please enter any findings.</div>");
			}
			else {
				jq('#' + start_by + 'FindingsReq').remove();
			}
		});
		
		jq('textarea[id$=Findings]').blur(function() {
		
			var start_by = jq(this).attr("id").replace("Findings", "") + "Findings";
			var answer_by = jq(this).attr("id").replace("Findings", "") + "Answer";
			
			if (jq(this).val() == '' && jq('#' + answer_by).val() == 'No') {
				jq('#' + start_by + 'FindingsReq').remove();
				jq('#' + start_by).after("<div id='" + start_by + "FindingsReq' class='reqcomment'>Please enter findings.</div>");
			}
			else {
				jq('#' + start_by + 'FindingsReq').remove();
			}
		});
		
		
		jq('textarea[id$=Findings]').each(function() {
			jq(this).trigger("change");
		});
		alert ('last');
});

Open in new window

0
 
LVL 82

Expert Comment

by:leakim971
ID: 39652114
as you can't share an address I don't where your logic currently fail and I'm not sure your original code handle this problem
0
 

Author Comment

by:atljarman
ID: 39652147
the commented out code is what is writing over the message.  I tried to make it more perscriptive, where there is an else if rather than an elese and it still doesn't fix it.  

jq(window).load(function(){

		
/*
		jq('select[id$=Answer]').change(function() {
			var finding = jq(this).attr("id").replace("Answer", "") + "Findings";
			
			if (jq('#' + finding).val() == '' && (jq(this).val() == 'No' )) {
				jq('#' + finding + 'FindingsReq').remove();
				jq('#' + finding).after("<div id='" + finding + "FindingsReq' class='reqcomment'>Please enter findings.</div>");
			}
			else {
				jq('#' + finding + 'FindingsReq').remove();
			}
		});
*/
		
		jq('textarea[id$=Findings]').blur(function() {
		
			var finding = jq(this).attr("id").replace("Findings", "") + "Findings";
			var theanswer = jq(this).attr("id").replace("Findings", "") + "Answer";
			
			if (jq(this).val() == '' && jq('#' + theanswer).val() == 'No') {
				jq('#' + finding + 'FindingsReq').remove();
				jq('#' + finding).after("<div id='" + finding + "FindingsReq' class='reqcomment'>Please enter findings.</div>");
			}
			else if (!jq('#' + finding).val() == '' || jq('#' + theanswer).val() == 'Yes' || jq('#' + theanswer).val() == 'N/A' || jq(this).val() == ''){
				jq('#' + finding + 'FindingsReq').remove();
			}
		});
		
		jq('textarea[id$=Findings]').each(function() {
			jq(this).trigger("blur");
		});
		alert ('last');
		
		
});

Open in new window

0
 
LVL 82

Expert Comment

by:leakim971
ID: 39652179
without seing your page is not possible to help
0
 

Author Comment

by:atljarman
ID: 39652181
let me see if I can fix, or break down the html and provide a representative sample.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39652192
if you can, put the page and javascript here : http://jsfiddle.net/
0
 

Accepted Solution

by:
atljarman earned 0 total points
ID: 39653641
Never used js fiddle, but found the err.  I tried to load to jsfiddle but couldn't get it to work.

For some reason the val for some of the dropdowns, first 5-6 are being listed as '' when the value selected is 'No' when refreshed.  Here is what is working.  Only issue, if someone selects 'No' and then selects "Select" from teh dropdown, then the text does not go away.  I tried using windows load, and don't have any ajax.

		jq('select[id$=Answer]').change(function() {
			var finding = jq(this).attr("id").replace("Answer", "") + "Findings";
			var theresponse = jq(this).attr("id");
			var selresp = jq(this).val();
			if (jq.trim(jq('#' + finding).val()).length == 0 && (selresp == 'No' )) {
				if (!jq('#' + finding + 'Req').length == 0 ) {
					jq('#' + finding + 'Req').remove();
				}
				jq('#' + finding).after("<div id='" + finding + "Req' class='reqcomment'>Please enter findings.</div>");
			
			}
			else if ((selresp == 'Yes' ) || (selresp == 'N/A' ) ){
				if (!jq('#' + finding + 'Req').length == 0 ) {
					jq('#' + finding + 'Req').remove(); 
					//alert('#' + finding + 'Req ' + jq(this).attr("id") + ' ' + jq(this).val());
				}
			}
			/*else if ((selresp == '' ) && !jq('#' + finding + 'Req').length == 0 ){
					jq('#' + finding + 'Req').remove();
					alert('#' + finding + 'Req ' + jq(this).attr("id") + ' ' + jq(this).val());
			}*/
		});
		
		jq('textarea[id$=Findings]').blur(function() {
		
			var finding = jq(this).attr("id").replace("Findings", "") + "Findings";
			var theanswer = jq(this).attr("id").replace("Findings", "") + "Answer";
			
			if (jq(this).val() == '' && jq('#' + theanswer).val() == 'No' ) {
				if (!jq('#' + finding + 'Req').length == 0 ) {
					jq('#' + finding + 'Req').remove();
				}
				jq('#' + finding).after("<div id='" + finding + "Req' class='reqcomment'>Please enter findings.</div>");
			}
			else if (!jq('#' + finding).val() == '' || jq('#' + theanswer).val() == 'Yes' || jq('#' + theanswer).val() == 'N/A' || jq(this).val() == ''){
				jq('#' + finding + 'Req').remove();
			}
		});

Open in new window

0

Featured Post

Business Impact of IT Communications

What are the business impacts of how well businesses communicate during an IT incident? Targeting, speed, and transparency all matter. Find out more in this infographic.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

739 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question