Question

这是我关于SO的第一个问题，相信我，我试图找到这个问题的答案，但无济于事。

我有一个html表单，我试图使用Jquery验证。下面的代码在localhost上运行正常（我使用wamp）但是当我将它放在服务器上时，按下提交按钮会导致出现错误消息，即使电子邮件地址有效也是如此。提交操作仍然有效，但我在发生错误时使用e.preventDefault();。

您可以在http://recharged.in/go-status.php

重现该问题

以下是代码：

<div id="gostatusdiv">
<h1>Status</h1>
<p>Check the status of your order by entering your email address below.<br/>If you are a registered user, your orders won't appear here.</p>
<form id="gostatusform" name="gostatusform" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<label for="gostatus"><b>Email Address:</b></label><span id="errorliemail" class="errormsgs" name="errorliemail">
            &nbsp;&nbsp;Invalid Email address&nbsp;&nbsp;
        </span><br/>
<input type="text" id="gostatus" name="gostatus" placeholder="Email you entered during your order" /><br/>
<input type="submit" id="gostatusbtn" value="Get my orders" name="submit" class="gostatusbtn buttons" />
</form>
<script type="text/javascript">
    $('#gostatusform').on('submit', function(e){
        $('#errorliemail').slideUp();
        $("#gostatus").addClass("validfields");
        $("#gostatus").removeClass("invalidfields");
        var li_email = $("#gostatus").val();
        var mailtest = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);
        //Validate Email ID
        if(!mailtest.test(li_email)) {
            e.preventDefault();
            $('#errorliemail').slideDown();
            $("#li_email").removeClass("validfields");
            $("#li_email").addClass("invalidfields");
        }
    });
</script>
</div>

我不知道可能导致这种情况的最轻微的线索。任何帮助表示赞赏。感谢。

Answer 1

当你点击提交时，你做的第一件事就是#errorliemail滑动，无论表单是否有效。

你应该尝试类似的东西：

$('#gostatusform').on('submit', function(e){
    $("#gostatus").addClass("validfields");
    $("#gostatus").removeClass("invalidfields");
    var li_email = $("#gostatus").val();
    var mailtest = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);
    //Validate Email ID
    if(!mailtest.test(li_email)) {
        e.preventDefault();
        $('#errorliemail').slideDown();
        $("#li_email").removeClass("validfields");
        $("#li_email").addClass("invalidfields");
    }else{
        $('#errorliemail').slideUp();
    }
});

Answer 2

感谢您的帮助，但看起来我自己偶然发现了解决方案。将slideDown()和slideUp()更改为show()和hide()就可以了。看起来滑动动画并不意味着以跨度运行。

我仍然不确定为什么相同的代码在localhost上运行没有任何问题，但在我上传到服务器上时出现了问题。

Jquery代码在localhost上运行正常，但在服务器上运行不正常

2 个答案: