jquery validation

I am trying to validate a required checkbox on an existing ajax form that submits to db. All the other required text fields show the validation "required" error (reveals a hidden div with the word "required") but the checkbox field does not unless I remove the value from the input field (value="Y") but then the submission inserts an empty value in the db table.

<input type="checkbox" name="age_rules" id="rules" class="req_class" value="y" >
   <label class="label2">By participating, I agree to be bound by the officia rules.<span class="req">*</span><em id="err_rules" class="error">required</em></label>

The js validation include has:

// bind to the form's submit event
    $(formID).submit(function() {
       
        $(this).ajaxSubmit(options);

        return false;
    });
   
    $(".req_class").change(function() {
       onChangeHandle(this);
    });
 
});

I suspect I need to add a snippet that validates for the "checked" attribute but I don't understand the syntax. Please help...
web5dev7Asked:
Who is Participating?
 
ansudhindraConnect With a Mentor Commented:
sorry...
try this one..
 
function onChangeHandle(obj)
{
    if(obj.type == 'checkbox') {
       if(obj.checked) {
           HideVisibility("#err_"+obj.id);  
       } else {
           ShowVisibility("#err_"+obj.id); 
       }
    } else if(jQuery.trim(obj.value) != '') {
       HideVisibility("#err_"+obj.id); 
    }else
    {
       ShowVisibility("#err_"+obj.id); 
    }
}

Open in new window

0
 
ansudhindraConnect With a Mentor Commented:
can you post the code for onChangeHandle(this) function...
0
 
Dave BaldwinFixer of ProblemsCommented:
This doesn't appear to be a PHP question.  Please click on "Request Attention" and get the zones changed to javascript and jquery.
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
Ray PaseurConnect With a Mentor Commented:
Whatever you do in jQuery, you will also need to do the validation on the server side after the form is submitted.  You might want to use the Request Attention button and ask a moderator to move this question to the jQuery and JavaScript zones, then post a new question here about how to do the server-side validation in PHP.
0
 
web5dev7Author Commented:
Ansud,

regarding your question: "can you post the code for onChangeHandle(this) function"

please see below:

function onChangeHandle(obj)
{
    if(jQuery.trim(obj.value) != '')
    {
       HideVisibility("#err_"+obj.id);
    }else
    {
       ShowVisibility("#err_"+obj.id);
    }
}
0
 
web5dev7Author Commented:
Ray,

yes thanks for mentioning the server side - the server side validation is actually working correctly for this checkbox field (displays the intended error message "you must agree to the terms" if I remove the Y in value="Y" from the input tag) - it's only the client side Ajax that is not revealing the "required" alert along with the other textbox "required " alerts (which are working).

I'm pretty sure it's a checkbox "checked' property thing.
0
 
Eddie ShipmanConnect With a Mentor All-around developerCommented:
you will also need to do the validation on the server side after the form is submitted

Not exactly, Ray. I use the jQuery validationEngine plugin and it has GREAT options for validation, including ajax validation. You can even validate using your rules inline on blur.
http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/
Very easy t setup and configure. I replaced the standard jQuery validate plugin in 5 forms in less than 15 min.
0
 
Dave BaldwinFixer of ProblemsCommented:
The reason you need to validate form data on the Server is because spammers and hackers will post data DIRECTLY to your action page and skip your jquery validation in your web page.
0
 
ansudhindraConnect With a Mentor Commented:
Hello,
Your function checks for the value on change. Since value is there it will validate it...

change your function to ....

function onChangeHandle(obj)
{
    if(obj.type == 'checkbox' && obj.checked) {
       HideVisibility("#err_"+obj.id);  
    } else {
       ShowVisibility("#err_"+obj.id);
    }
    if(jQuery.trim(obj.value) != '')
    {
       HideVisibility("#err_"+obj.id);
    }else
    {
       ShowVisibility("#err_"+obj.id);
    }
}

BR-Sudhindra-www.clicksperday.com
0
 
web5dev7Author Commented:
Tried it, makes sense,  but no change in behavior. What do you think?
0
 
web5dev7Author Commented:
still no change.  It wll only work if I strip the Y value (value="Y") from the input tag.
0
 
ansudhindraConnect With a Mentor Commented:
can you post the entire html?
0
 
web5dev7Author Commented:
yes here below...

<form method="post" id="contact_form" action="process.php">

<p><label>First Name <span class="req">*</span><em id="err_first_name" class="error">required</em></label><span><input type="text" id="first_name" name="first_name" class="text req_class" /></span></p>

<p><label>Last Name <span class="req">*</span><em id="err_last_name" class="error">required</em></label><span><input type="text" id="last_name" name="last_name" class="text req_class" /></span></p>

<p><label>Email Address <span class="req">*</span><em id="err_email" class="error">required</em></label><span><input type="text" id="email" name="email" class="text req_class" /></span></p>
                                                                                 
<p>
<span class="lef"><input type="checkbox" name="rules" id="rules" class="check req_class" value="y" ></span>
<label class="label2">
I am over 18 years of age. I agree to be bound by the official rules.
<span class="req">*</span>
<em id="err_rules" class="error">required</em>
</label>
</p>
   
<p><span class="lef"><input type="checkbox" name="optin" id="optin" class="check" value="y" checked="yes"> </span>
<label class="label2">Sign me up for future offers and promotions.</label></p>
   
<p class="button">
<input type="submit" name="button" id="contact_btn" class="btn ajax_submit_btn" value="Submit" />
<span class="ajax_loading"><img src="images/ajax-loader.gif" /></span>
</p>  
                                                                                                                               
 </form>
0
 
web5dev7Author Commented:
p.s. I just noticed that if I check the box, then uncheck it, the "required" message is revealed - making me think that maybe the checkbox validation needs to be inserted somewhere in this part of the jquery which refers to the "req_class" rather than the existence of a value ??:

function RequiredValidation()
{
    var is_error = false;
    var is_focus = false;
     
    $(".req_class").each(function(index){
        var _value = jQuery.trim($(this).val());
        var field = this.name;
        if(_value == '')
        {
           if(is_focus == false)
           {
               is_focus = true;
               $(this).focus();
           }
           
           ShowVisibility("#err_"+field);
           is_error = true;
        }else
        {
            HideVisibility("#err_"+field);
        }
    });
   
    return  is_error;
}

function doValidate()
{
   var is_error = RequiredValidation();
   if(is_error == true)
   {
       return false;
   }else
   {
       return true;
   }
}
0
 
web5dev7Author Commented:
not fully solved but god effort
0
All Courses

From novice to tech pro — start learning today.