Go Premium for a chance to win a PS4. Enter to Win

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

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...
0
web5dev7
Asked:
web5dev7
  • 7
  • 4
  • 2
  • +2
6 Solutions
 
ansudhindraCommented:
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
 
Ray PaseurCommented:
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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
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
 
EddieShipmanCommented:
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
 
ansudhindraCommented:
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
 
ansudhindraCommented:
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
 
web5dev7Author Commented:
still no change.  It wll only work if I strip the Y value (value="Y") from the input tag.
0
 
ansudhindraCommented:
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

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.

  • 7
  • 4
  • 2
  • +2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now