Solved

ajax validation

Posted on 2011-09-26
2
204 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

PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

Question has a verified solution.

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

Suggested Solutions

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…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
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…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

773 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