Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    May 2009
    Posts
    141
    Thanks
    64
    Thanked 1 Time in 1 Post

    Javascript validation

    Hi guys, I have a form which has a layout similar to this
    Code:
    <li class="row_main">
         <label>Last Name <span class="required">*</span></label>
         <input type="text" class="input" name="user_last_name" value=""/>
         <span class="error_msg"></span>
    </li>
    If its empty, the javascript to handle this does the following
    Code:
    var fields = [ $('input[name="user_last_name"]'), 
    $('input[name="edit_user_pass"]')]; //removed some fields
    
    var hasError = 0;
    for (var i = 0; i < fields.length; i++)
    {
    	if ( fields[i].val() == '' )
    	{
    		showFormError(fields[i], 'Can not be empty!');
    		hasError = 1;
    	}
    }
    The showFormError function is simply
    Code:
    function showFormError(elem, message)
    {
    	elem.prev().addClass('error');
    	elem.next().text(message).show();
    }
    Now this has been working perfectly, and if any field is empty, it adds a class to the label which then turns it red.

    I have had to add a new element to my form though, a recaptcha thing. And instead of the normal layout, it is more like
    Code:
    <li class="row_main">
         <label class="captcha">Verification <span class="required">*</span>       </label>
         <img id="captcha" src="lib/securimage/securimage_show.php" alt="CAPTCHA Image" />
        <span class="error_msg"></span>
    </li>
    <li class="row_main">
        <label></label>
        <input type="text" name="captcha_code" size="10" maxlength="6" />
        <a href="#" onclick="document.getElementById('captcha').src = 'lib/securimage/securimage_show.php?' + Math.random(); return false">[ Different Image ]</a>
    </li>
    So with the above javascript, it adds the error class onto the empty label, and it changes the text of the a element. Really, it should be adding a class to the label with a class already called captcha, and applying the message to the span.

    I was wondering how I could amend my code to handle this? I have been trying things like the following but it doesnt even seem to be going into the if statement
    Code:
    if($('input[name="captcha_code"]').val()==''){
            $('.captcha').css('color', 'red');
            alert("Empty")
            elem.next().next().text(message).show();
            hasError = 1;
    }
    Nick

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,960
    Thanks
    0
    Thanked 236 Times in 233 Posts
    Try this:
    PHP Code:
    function showFormError(elemmessage)
    {
        if (
    elem.attr('name') == 'captcha_code') {
            var 
    $captchaRow elem.parent().prev();
            
    $captchaRow.children('.captcha').addClass('error');
            
    $captchaRow.children('.error_msg').text(message).show();
        }
        else {
            
    elem.prev().addClass('error');
            
    elem.next().text(message).show();
        }


  • Users who have thanked glenngv for this post:

    nick2price (10-05-2013)

  • #3
    Regular Coder
    Join Date
    May 2009
    Posts
    141
    Thanks
    64
    Thanked 1 Time in 1 Post
    Thank you, works perfectly. I was trying it the other way round, never thought about doing it this way.

  • #4
    New Coder
    Join Date
    Sep 2013
    Posts
    20
    Thanks
    4
    Thanked 0 Times in 0 Posts
    It might also be worthwhile looking at the HTML5 required attribute as well as related features like the new input types and other form attributes.

    The html required attribute does not allow the form to be submitted before all fields with the required attribute have been filled in and it indicates the field that is missing.

    Offcourse this does not work in older browsers so for that you still need to write your own code.


  •  

    Posting Permissions

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