Question

我想知道是否有人可以帮助我。

首先，我很抱歉，我对JavaScript和jQuery相对较新，所以这可能是一个非常愚蠢的问题。

使用这些教程here和here我已将this页面放在一起，以允许用户将记录添加到MySQL数据库，但我对表单有点困难验证'和jQuery'提交'消息。

如果使用选择上面的链接，那么一旦页面加载，选择“保存”，您将看到正确的字段验证被激活，但尽管有验证错误，“位置已保存”消息显示在底部页面，页面刷新将记录保存到数据库。

显然这不应该发生，但我很难加入'验证'和'提交'消息。他们独立工作正常，但正如你所看到的，一旦他们在一起就没有。

以下代码处理“保存记录”并刷新页面

更新 - 下面的工作解决方案

<script>
        jQuery(document).ready(function(){
            jQuery("#addlocation").validationEngine();
            $("#addlocation").bind("jqv.field.result", function(event, field, errorFound, prompText){ console.log(errorFound) })
        });
    </script>
<script type="text/javascript">
$(document).ready(function(){
    $('#addlocation').submit(function(){

        //check the form is not currently submitting
        if($(this).data('formstatus') !== 'submitting'){

            //setup variables
            var form = $(this),
                formData = form.serialize(),
                formUrl = form.attr('action'),
                formMethod = form.attr('method'), 
                responseMsg = $('#saverecordresponse');

            //add status data to form
            form.data('formstatus','submitting');

            //show response message - waiting
            responseMsg.hide()
                       .addClass('response-waiting')
                       .text('Please Wait...')
                       .fadeIn(200);

            //send data to server for validation
            $.ajax({
                url: formUrl,
                type: formMethod,
                data: formData,
                success:function(data){

                    //setup variables
                    var responseData = jQuery.parseJSON(data), 
                        klass = '';

                    //response conditional
                    switch(responseData.status){
                        case 'error':
                            klass = 'response-error';
                        break;
                        case 'success':
                            klass = 'response-success';
                        break;  
                    }

                    //show reponse message
                    responseMsg.fadeOut(200,function(){
                        $(this).removeClass('response-waiting')
                               .addClass(klass)
                               .text(responseData.message)
                               .fadeIn(200,function(){
                                   //set timeout to hide response message
                                   setTimeout(function(){
                                       responseMsg.fadeOut(200,function(){
                                           $(this).removeClass(klass);
                                           form.data('formstatus','idle');
                                       });
                                   },3000)
                                });
                    });
                }
            });
        }

        //prevent form from submitting
        return false;
    });
});
</script>

这是'saverecord.php'脚本，在选择“保存”按钮时调用该脚本。

<?php


    //sanitize data
    $userid = mysql_real_escape_string($_POST['userid']);   
    $locationname = mysql_real_escape_string($_POST['locationname']);   
    $returnedaddress = mysql_real_escape_string($_POST['returnedaddress']); 

    //validate email address - check if input was empty
    if(empty($locationname)){
        $status = "error";
        $message = "You didn't enter a name for this location!";
    }
    else if(!preg_match('/^$|^[A-Za-z0-9 _.,]{5,35}$/', $locationname)){ //validate email address - check if is a valid email address
            $status = "error";
            $message = "You have entered an invalid Location Name!";
    }

    else{
            $query = mysql_query("INSERT INTO `table` (userid, locationname, returnedaddress) VALUES ('$userid', '$locationname', '$returnedaddress')");  
            if($query){ //if insert is successful
                $status = "success";
                $message = "Location Saved!";   
            }
            else { //if insert fails
                $status = "error";
                $message = "I'm sorry, there has been a technical error! Please try again. If problems persist please contact Map My Finds support.";   
            }

    }

    //return json response
    $data = array(
        'status' => $status,
        'message' => $message
    );

    echo json_encode($data);
    exit;
?>

我只是想知道是否有人可以看看这个请让我知道我哪里出错了。

非常感谢和亲切的问候

Answer 1

我相信你需要：

if($.validationEngine.submitForm(this,settings) == true) {return false;}

在$ .ajax行之前的某个地方

Answer 2

IRHM，在您的活动中提交之前检查表格是否有效，即

$('#addlocation').submit(function(){
    if($(this).validate()){
       // put your all existing content here.
    }  
});

为了防止在ajax之后提交表单，在if上面的句子结尾处返回false，即

if($(this).validate()){
    // put your all existing content here.
    return false;
}

我猜问题是由于验证引擎发生的，所以在这种情况下要阻止表单提交尝试使用如下：

$('#addlocation').submit(function(evt){
    if($(this).validate()){
       evt.preventDefault();
       // put your all existing content here.
    }  
});

如果上述代码不起作用，请将onValidationComplete事件包含在validationEngine中，并将所有现有内容添加到 if（$（this）.validate（））阻止即

jQuery(document).ready(function(){
   // binds form submission and fields to the validation engine
   jQuery("#addlocation").validationEngine({ onValidationComplete: function(){ 

        //setup variables

        //add status data to form

        //show response message - waiting

        //send data to server for validation

        return false; 
      }
    });
});

祝你好运

Answer 3

经过几天的努力，我现在有了一个有效的解决方案，使用了我在原帖中添加的示例here。

使用记录保存的消息进行表单验证

3 个答案: