Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 363
  • Last Modified:

JQuery Validation Comment for Text Field

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
atljarman
Asked:
atljarman
  • 11
  • 10
1 Solution
 
leakim971PluritechnicianCommented:
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
 
atljarmanAuthor Commented:
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
 
leakim971PluritechnicianCommented:
I'm not sure to understand...

Have you got this issue with your huge code too?
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
atljarmanAuthor Commented:
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
 
leakim971PluritechnicianCommented:
If you put back your previous code, do you have the same problem?
0
 
atljarmanAuthor Commented:
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
 
leakim971PluritechnicianCommented:
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
 
atljarmanAuthor Commented:
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
 
leakim971PluritechnicianCommented:
be sure the code run placing an alert("ok") between line 3-4
0
 
atljarmanAuthor Commented:
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
 
atljarmanAuthor Commented:
Does the current id need to be passed to the function?  If so, how would you do that?
0
 
leakim971PluritechnicianCommented:
jq(this).attr("id")

please provide a link to your page
0
 
atljarmanAuthor Commented:
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
 
leakim971PluritechnicianCommented:
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
 
atljarmanAuthor Commented:
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
 
leakim971PluritechnicianCommented:
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
 
atljarmanAuthor Commented:
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
 
leakim971PluritechnicianCommented:
without seing your page is not possible to help
0
 
atljarmanAuthor Commented:
let me see if I can fix, or break down the html and provide a representative sample.
0
 
leakim971PluritechnicianCommented:
if you can, put the page and javascript here : http://jsfiddle.net/
0
 
atljarmanAuthor Commented:
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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 11
  • 10
Tackle projects and never again get stuck behind a technical roadblock.
Join Now