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
Solved

ajax validation

Posted on 2011-09-26
2
205 Views
Last Modified: 2012-06-21
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 AJAX "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.

I 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 the part of the jquery which refers to the "req_class"  ??:

form checkbox input tag:

<input type="checkbox" name="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>

Validation includes:

function JsonResponse(jsonResponse)
{
    if(jsonResponse.ice_response.success != null && jsonResponse.ice_response.success != undefined)
        return jsonResponse.ice_response.success;
    else if(jsonResponse.ice_response.error != null && jsonResponse.ice_response.error != undefined)      
         return jsonResponse.ice_response.error;              
}
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;
   }
}


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);
    }
}


=========================
or maybe somewhere in here  ??
=========================

var response_div =  "#response_div";
var formID =  "#myform";
var required_fields = ["name","rules"]
 
jQuery(document).ready(function()
{
     // prepare Options Object
    var options = {
        targetDiv:     response_div,
        beforeSubmit: validate,
        success:       onSuccess,
        error:       onError,
        dataType:  'json'
    };
 
 // bind to the form's submit event
    $(formID).submit(function() {
       
        $(this).ajaxSubmit(options);

        return false;
    });
   
    $(".req_class").change(function() {
       onChangeHandle(this);
    });
 
});
0
Comment
Question by:web5dev7
2 Comments
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 36708589
try this RequiredValidation function :
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 == '' || ( $(this).attr("type") == "checkbox" && !$(this).is(":checked") ) )
        {
           if(is_focus == false)
           {
               is_focus = true;
               $(this).focus();
           }
           
           ShowVisibility("#err_"+field);
           is_error = true;
        }else
        {
            HideVisibility("#err_"+field);
        }
    });
    
    return  is_error;
}

Open in new window

0
 

Author Comment

by:web5dev7
ID: 36710582
leakim,

you are my hero... it worked!

thak you soooo  much...
0

Featured Post

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

837 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