SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast mr_nabo's Avatar
    Join Date
    May 2006
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to add class to a label without an ID?

    Hi,

    I'm working with a CMS where it's not possible to add an ID to the label. JQuery is available, but I'd like to learn how to do it both JQuery and JavaScript if possible.

    Here's my HTML:

    HTML Code:
    <p><label for="res_name">Name *</label><input type="text" class="ccm-input-text" tabindex="3" value="" name="res_name" id="res_name"></p>
    <p><label for="res_job">Job Title</label><input type="text" class="ccm-input-text" tabindex="4" value="" name="res_job" id="res_job"></p>
    And I need to add the class 'res-required' to the label when the form is submitted but no data given for the fields I'm checking against. I'm running the function checkform() on submit to currently check the name and email inputs and can get the class to appear on the input, but don't know how to select the label if it doesn't have an ID:

    Code:
    <script type="text/javascript">
     function checkform(form) {
    	if (form.res_name.value == "") {
    		alert( "Please enter your name." );
    		if(document.getElementById && document.createTextNode) {
    				var n = document.getElementById('res_name');
    				if(n) {
    					// Check if class exists and do not overwrite if so (add with a preceding space)
    					n.className+=n.className?' res-required':'res-required';
    			}
    		}
    		form.res_name.focus();
    		return false;
    	}
    	if (form.res_email.value == "") {
    	  alert( "Please enter an email address." );
    	  form.res_email.focus();
    	  return false;
    	}
    	return true ;
     }
    </script>
    Can anyone help me out?

    Thanks,

    mn

  2. #2
    SitePoint Zealot
    Join Date
    May 2009
    Location
    Netherlands
    Posts
    189
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    document.getElementById('res_name').parentNode.firstChild.className = 'res-required';

  3. #3
    SitePoint Enthusiast mr_nabo's Avatar
    Join Date
    May 2006
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great, that worked a treat, thanks - do you know how I'd mark all the labels for required inputs in one go? The approach I'm using marks one at a time:

    Code:
    <script type="text/javascript">
     //<![CDATA[
    
     function checkform(form) {
    	if (form.res_name.value == "") {
    		alert( "Please enter your name." );
    		document.getElementById('res_name').parentNode.firstChild.className = 'res-required';
    		form.res_name.focus();
    		return false;
    	}
    	if (form.res_email.value == "") {
    	  alert( "Please enter an email address." );
    	  document.getElementById('res_email').parentNode.firstChild.className = 'res-required';
    	  form.res_email.focus();
    	  return false;
    	}
    	return true ;
     }
    
     //]]>
    </script>
    Thanks,

    mn

  4. #4
    SitePoint Zealot
    Join Date
    May 2009
    Location
    Netherlands
    Posts
    189
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Don't quite follow you. You first have to check validity before changing the class. Why all in one go?
    Note, if a field is valid, then remove the class 'res-required'

  5. #5
    SitePoint Enthusiast mr_nabo's Avatar
    Join Date
    May 2006
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As you can probably tell, I'm very new to JS.

    On sites I've seen, all required fields are highlighted if you fail to fill in just one of them and submit the form. I was thinking it would be neater to have all the required fields highlighted at once instead of highlighting them one-by-one.

    Re: your note, is there an easy way to remove the class? I was looking for a solution online, but it seems they all require making lengthy functions (is this why people use JQuery more these days as well - to cut down on code?).

    I'm kind of coming at this the wrong way round, trying to learn JavaScript after learning some JQuery...

  6. #6
    SitePoint Zealot
    Join Date
    May 2009
    Location
    Netherlands
    Posts
    189
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Showing all errors means having only 1 alert and no focus, although you could focus on the first error.
    Code:
     function checkform(form) {
    var errorText = '';
    if (form.res_name.value == "") {
        errorText += "Please enter your name.\n";
        document.getElementById('res_name').parentNode.firstChild.className = 'res-required';
        }
    if (form.res_email.value == "") {
        errorText += "Please enter an email address.\n";
        document.getElementById('res_email').parentNode.firstChild.className = 'res-required';
        }
    if(errorText != '') {
        alert(errorText);
        return false;
        }
    else {
        return true ;
        }
    }
    Code:
    // remove class
    document.getElementById('res_name').parentNode.firstChild.className = '';

  7. #7
    SitePoint Enthusiast mr_nabo's Avatar
    Join Date
    May 2006
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    dogFang, hartelijk bedankt!

    That's really great, feel I've learned some important things through this.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •