Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

jquery validation

Posted on 2011-09-22
17
Medium Priority
?
461 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 1158 total points
ID: 36582648
can you post the code for onChangeHandle(this) function...
0
 
LVL 84

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 111

Assisted Solution

by:Ray Paseur
Ray Paseur earned 189 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
Vim Reference Guide

Vim is a powerful text editor favored by many sysadmins and developers - here are some commands that you'll want to keep in your back pocket!

 

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 153 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 84

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 1158 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 1158 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 1158 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

Build and deliver software with DevOps

A digital transformation requires faster time to market, shorter software development lifecycles, and the ability to adapt rapidly to changing customer demands. DevOps provides the solution.

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.
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

688 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