Question

我正在使用jQuery插件“验证”来验证我正在使用的表单。它的工作原理只需要使用CSS为错误消息添加样式。

但是，这就是问题所在。我正在使用Ajax提交表单，因此当用户提交表单时，表单淡出并显示一个很好的成功消息。但是，如果用户错过了必填字段，则表单会淡出，并且会看到错误消息。他们可以单击按钮，查看表单和错误的位置。现在他们修复错误，然后再次点击提交。他们现在正在提交表单提交，表单将不会处理。他们必须刷新页面才能提交表单。这是一种痛苦，对用户来说不是一个好的过程。

以下是问题：如何验证用户是否在所有必填字段之前中有字段提交并避免上述问题？

感谢您的任何建议和帮助。

编辑已添加代码：

AJAX和验证码：

<script type="text/javascript">
function jqsub() {

var $j = jQuery.noConflict();
var $jform = $j('#contactform'); // form ID
var $jmessagebox = $j('#ajaxdiv'); // message box ID
var $jsuccessmessage = "<h3>We will be in contact soon. </h3>"; // success message in HTML format
var $jerrormessage = "<h3>Error - Please Try Again</h3><p class='light_button' id='errorbutton'>Return to Form </p><p>Please Note: You may have to refresh your page before you can submit the form again. We apologize for any inconvenience. </p><p>If the error continues please contact us at <a href='mailto:support@site.com'>Support@site.com</a></p>"; //error message in HTML format

$j.ajax({
    type: 'POST',
    url: $jform.attr('action'),
    data: $jform.serialize(), 
    success: function (msg) { 
                    if (msg.FormProcessV2Response.success) {
                    $jmessagebox.append($jsuccessmessage) 
                    $jmessagebox.fadeIn();
                    }
                    else {
                    $jmessagebox.append($jerrormessage) 
                    $jmessagebox.fadeIn();  
                    }    
            },
    error: function (msg) {
                        $jmessagebox.append($jerrormessage) 
                        $jmessagebox.fadeIn();
                },
   });
$jform.fadeOut("slow", function(){ //fade out of form after success
  $jmessagebox.fadeIn("slow");
});
$j("#errorbutton").live('click',function(){ //allows form to be faded in, in the event of an error
    $jmessagebox.fadeOut("slow", function(){
        $jform.fadeIn("slow");
    });
});

}
</script>
<script type="text/javascript">
var $j = jQuery.noConflict();
$j(document).ready(function() {
    $j('#contactform').validate();
});
</script>

表格代码：

<form action="/FormProcessv2.aspx?WebFormID=45926&amp;OID={module_oid}&amp;OTYPE={module_otype}&amp;EID={module_eid}&amp;CID={module_cid}&JSON=1" enctype="multipart/form-data" onsubmit="return checkWholeForm33499(this)" method="post" name="catwebformform33499" id="contactform">
<fieldset>
<input name="FullName" type="text" class="required cat_textbox" id="FullName" value="{module_fullname}" maxlength="255" />
<label for="FullName">Full  Name<span>required</span></label>
<input name="EmailAddress" type="text" class="required email cat_textbox" id="EmailAddress" value="{module_emailaddress}" maxlength="255" /><label for="email">Email Address<span>required</span></label>
<input name="CellPhone" type="text" class="required cat_textbox" id="CellPhone" value="{module_cellphone}" maxlength="255" /><label for="cellphone">Cell Phone<span>required</span></label>
</fieldset>
<fieldset>
<textarea onkeydown="if(this.value.length&gt;=1024)this.value=this.value.substring(0,1023);" class="required cat_listbox" rows="4" cols="10" id="CAT_Custom_254790" name="CAT_Custom_254790"></textarea></td>
<label for="message">Message<span>required</span></label>
</fieldset>
<fieldset>
<label>Verification <span>required</span></label>
{module_captchav2}
</fieldset>
<div>
<input type="submit" value="Send" tabindex="5" id="submit" name="submit" class="light_button_send" />
</div>
<script type="text/javascript" src="/CatalystScripts/ValidationFunctions.js"></script>
<script type="text/javascript">
//<![CDATA[
var submitcount33499 = 0;function checkWholeForm33499(theForm){var why = "";if (theForm.CaptchaV2) why += captchaIsInvalid(theForm, "Enter Word Verification in box below", "Please enter the correct Word Verification as seen in the image"); if(why != ""){alert(why);return false;}if(submitcount33499 == 0){submitcount33499++;jqsub();return false;}else{alert("Form submission is in progress.");return false;}}
//]]>
</script>
</form>

Answer 1

为什么不在$ .ajax成功函数中调用fadeIn和fadeOut？

像

这样的东西

$j.ajax({
    .
    .
    .
    success: function (msg) { 
                if (msg.FormProcessV2Response.success) {
                    $jmessagebox.append($jsuccessmessage) 
                    $jmessagebox.fadeIn();
                    $jform.fadeOut("slow"
                                   , function(){ //fade out of form after success
                                       $jmessagebox.fadeIn("slow");
                    });
                }
                else {
                    $jmessagebox.append($jerrormessage) 
                    $jmessagebox.fadeIn();  
                }    
        },
        .
        .
        .
});

这样，如果没有错误，他的表格只会淡出。

关于你的重新提交问题，罪魁祸首是

if(submitcount33499 == 0){
   submitcount33499++;
   jqsub();
   return false;
}
else{
   alert("Form submission is in progress.");
   return false;
}

第一次提交表单时，submitcount33499会被提交（因为它第一次应该有一个值。第二次测试失败，然后进入else分支。< / p>

为什么要跟踪提交的数量呢？

jQuery插件验证和Ajax

1 个答案: