1

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

首先，我很抱歉，我对 JavaScript 和 jQuery 比较陌生，所以也许这是一个非常愚蠢的问题。

在这里和这里使用这些教程，我将这个页面放在一起，以允许用户将记录添加到 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;
?>

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

非常感谢和亲切的问候

4

3 回答 3

1

我相信你需要：

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

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

于 2012-08-25T18:28:46.107 回答
1

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

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

为了防止在 ajax 之后提交表单，在 if 块中的上述脚本的末尾放置 return 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事件并将if($(this).validate())validationEngine块的所有现有内容放入其中，即

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; 
      }
    });
});

祝你好运

于 2012-08-25T18:30:22.003 回答
0

经过几天的工作，我现在有了一个可行的解决方案，使用我添加到原始帖子中的示例here 。

于 2012-09-06T15:23:10.477 回答