HTML5 FORM,AJAX验证

时间:2012-07-14 19:49:18

标签: ajax forms html5 jquery

我正在尝试开发HTML5联系表单,并使用jQuery / AJAX进行验证。

我在网上找到的唯一帮助是this tutorial,它解释了如何在现代浏览器中为新的HTML5表单属性(必需和最小长度)执行此操作,并使用旧填充程序的polyfill,虽然我的需求有点不同。

基本上,我希望人们要么请求三个复选框中的一个,要么输入一条消息。单独地,这些元素都不是必需的,但我希望在提交表单之前至少有一个元素包含数据。

可以使用以下内容执行此操作:

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.";
}

如果有人知道如何为jQuery / AJAX编写它,那将非常感激。

2 个答案:

答案 0 :(得分:0)

如果信息是您在get请求中不想要的内容,那么请查看jQuery $.post()函数。文档http://api.jquery.com/jQuery.post/应该足以帮助您顺利进行。

答案 1 :(得分:0)

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

用户尝试提交表单:

    $( '#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
            });
        }
    });