Solved

JQuery Validation Comment for Text Field

Posted on 2013-11-13
23
353 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
  • 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
 

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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 

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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

747 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now