Solved

jquery validation

Posted on 2011-09-22
17
458 Views
Last Modified: 2012-05-12
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
Comment
Question by:web5dev7
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 7
  • 4
  • 2
  • +2
17 Comments
 
LVL 13

Assisted Solution

by:ansudhindra
ansudhindra earned 386 total points
ID: 36582648
can you post the code for onChangeHandle(this) function...
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 36582663
This doesn't appear to be a PHP question.  Please click on "Request Attention" and get the zones changed to javascript and jquery.
0
 
LVL 110

Assisted Solution

by:Ray Paseur
Ray Paseur earned 63 total points
ID: 36583271
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:web5dev7
ID: 36583750
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
 

Author Comment

by:web5dev7
ID: 36583835
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
 
LVL 26

Assisted Solution

by:EddieShipman
EddieShipman earned 51 total points
ID: 36583998
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
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 36584041
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
 
LVL 13

Assisted Solution

by:ansudhindra
ansudhindra earned 386 total points
ID: 36584898
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
 

Author Comment

by:web5dev7
ID: 36585112
Tried it, makes sense,  but no change in behavior. What do you think?
0
 
LVL 13

Accepted Solution

by:
ansudhindra earned 386 total points
ID: 36585161
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
 

Author Comment

by:web5dev7
ID: 36586837
still no change.  It wll only work if I strip the Y value (value="Y") from the input tag.
0
 
LVL 13

Assisted Solution

by:ansudhindra
ansudhindra earned 386 total points
ID: 36586892
can you post the entire html?
0
 

Author Comment

by:web5dev7
ID: 36588695
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
 

Author Comment

by:web5dev7
ID: 36589189
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
 

Author Closing Comment

by:web5dev7
ID: 36602192
not fully solved but god effort
0

Featured Post

Forrester Webinar: xMatters Delivers 261% ROI

Guest speaker Dean Davison, Forrester Principal Consultant, explains how a Fortune 500 communication company using xMatters found these results: Achieved a 261% ROI, Experienced $753,280 in net present value benefits over 3 years and Reduced MTTR by 91% for tier 1 incidents.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

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.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

751 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