Solved

JQuery Validation Comment for Text Field

Posted on 2013-11-13
23
357 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
Forrester Webinar: xMatters Delivers 261% ROI

Guest speaker Dean Davison, Forrester Principal Consultant, explains how a Fortune 500 communication company using xMatters found these results: Achieved a 261% ROI, Experienced $753,280 in net present value benefits over 3 years and Reduced MTTR by 91% for tier 1 incidents.

 

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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Find out what you should include to make the best professional email signature for your organization.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

749 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