?
Solved

ajax validation

Posted on 2011-09-26
2
Medium Priority
?
208 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
[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
2 Comments
 
LVL 82

Accepted Solution

by:
leakim971 earned 2000 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

On Demand Webinar: Networking for the Cloud Era

Ready to improve network connectivity? Watch this webinar to learn how SD-WANs and a one-click instant connect tool can boost provisions, deployment, and management of your cloud connection.

Question has a verified solution.

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

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
Suggested Courses
Course of the Month12 days, 20 hours left to enroll

777 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