Solved

jquery validation

Posted on 2011-09-22
17
453 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
  • 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 82

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 108

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
 

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 82

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
What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

 
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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Viewers will learn about the regular for loop in Java and how to use it. Definition: Break the for loop down into 3 parts: Syntax when using for loops: Example using a for loop:
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

743 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now