HTML5 FORM, AJAX VALIDATION

I am trying to develop a HTML5 contact form, and validate it with jQuery / AJAX.

The only help I could find online is this tutorial, which explains how to do this in modern browsers for the new HTML5 form attributes (required and min-length), and with the use of polyfills for older browsers, though my needs are a little different.

Essentially, I want people to either request one of three checkboxes, or type in a message. Individually, none of these elements are required, but I want at least one of them to contain data before the form is submitted.

Can do this with PHP using something like:

if(empty ($checkbox1) && empty($checkbox2) && empty($checkbox3) && empty($message) ){
    $formok = false;
    $errors[] = "You need to either make a request for information, or ask a question.";
}

If anyone knows how this can be written for jQuery / AJAX it would be much appreciated.

Answers


If the information is stuff you don't want in a get request then look into the jQuery $.post() function. The documentation http://api.jquery.com/jQuery.post/ should be plenty to get you along the right lines.


     var $checkbx1 = $( '#checkbox1' ),
         $checkbx2 = $( '#checkbox2' ),
         $checkbx3 = $( '#checkbox3' ),
         formok = true,
         $msg = $( '#mymsg' ).val();

user tries to submit the form:

    $( '#submitBtn' ).click( function() {
        if( ( $checkbx1.val() == '' && $checkbx2.val() == '' &&
              $checkbx3.val() == '' ) || $msg == '' ) {

            formok = false;

        }

        if( formok )
        {
            $.ajax({
                url: 'yourUrl',
                data: 'yourData',
                type: 'post',
                dataType: 'json',
                success: cb <-- your callback function
            });
        }
    });

Need Your Help

Floated divs acting like a clear: left applied

html css css-float

I'm having a problem with floated divs. When searching for an answer most questions were how to achieve the effect I am getting instead of how to achieve what I want. Basically I'm floating divs to