Question

我已经在我的页面上进行了一些表单验证，如果字段没有完成则显示错误，但由于某种原因表单即使字段是空的也提交...我需要显示错误以显示它们一直空白。

希望有人能看到问题，因为我不能:(

当测试它只拥有它似乎工作所以我认为有些东西与它相冲突：

这是我的表单页码：

<script>
        $(function() {
$("#datepicker").datepicker({
    altField: '#date'
});

$('#submit').click(function() {
    $('#output').html($('form').serialize());
});
});
</script>

<title>Can you guess when Ally McCoist will get the sack ???</title>

<script type="text/javascript">

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-9915379-4']);
_gaq.push(['_trackPageview']);

(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

</script>

</head>

<body>

<div id="container">

<div id="topbar">
<p>&nbsp;</p>
</div>
<!-- close topbar -->

<div id="home">
<div id="home-header">



<div id="form-entry">
<form method="post" action="send.php" id="theform" name="theform">
<input type="text" name="firstname" id="firstname" value="First Name" onFocus="this.value=''" this.onfocus = null class="yourinfo" ><br/>
<input type="text" name="lastname" id="lastname" value="Last Name" onFocus="this.value=''" class="yourinfo"><br/>
<input type="text" name="email" id="email" value="Email Address" onFocus="this.value=''" class="yourinfo"><br/>
<span style="color:#FFF; font-family:Arial, Helvetica, sans-serif; font-size:12px;">Ally McCoist will be sacked on</span>
<div id="datepicker"></div>
<input type="hidden" name="date" id="date">
<input type="image" src="images/submit-button-small.png" name="submit" id="submit" value="submit" style="margin-top:10px; margin-left:-2px;" >

</form>
</div>
</div>
<img src="images/can-you-guess-big.png" width="826" height="146" alt=""  />

<div id="bottom-social">

<table width="450" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="170" valign="top">
<img src="images/share-facebook-small.png" width="138" height="12" alt="share on facebook" style="margin-bottom:5px;"><br />
<script>function fbs_click() {u=location.href;t=document.title;window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(u)+'&t='+encodeURIComponent(t),'sharer','toolbar=0,status=0,width=626,height=436');return false;}</script><style> html .fb_share_link { padding:2px 0 0 20px; height:16px; background:url(http://static.ak.facebook.com/images/share/facebook_share_icon.gif?6:26981) no-repeat top left; }</style><a rel="nofollow" href="http://www.facebook.com/share.php?u=<;url>" onclick="return fbs_click()" target="_blank" class="fb_share_link"><img src="images/recommend.png" width="89" height="23" alt="Recommend on Facebook"></a>
</td>
<td width="144" valign="top">
<img src="images/share-twitter-small.png" width="116" height="12" alt="share on twitter" style="margin-bottom:5px;"><br/>
  <a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

</td>
<td width="36" valign="top"><img src="images/share-google-small.png" width="119" height="14" alt="share on twitter" style="margin-bottom:5px;" /><g:plusone size="medium"></g:plusone></td>
</tr>
</table>

<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
 })();
</script>

</div>

</div><!-- close home -->


</div><!-- close container -->


</body>
</html>

这是我用来发送数据库的代码：

<?php

//get the correct format
$new_date = date('Y-m-d',strtotime($_POST['date']));

mysql_connect ("localhost", "user", "pass") or die ('Error: ' . mysql_error());
mysql_select_db ("database");

$firstname = mysql_real_escape_string($_POST['firstname']);
$lastname = mysql_real_escape_string($_POST['lastname']);
$email = mysql_real_escape_string($_POST['email']);
$datepicker = mysql_real_escape_string($_POST['date']);

$query="INSERT INTO table (id, firstname, lastname, email, date) 
 VALUES (NULL, '".$firstname."', '".$lastname."', '".$email."',   '".mysql_real_escape_string($new_date)."')";

mysql_query($query) or die (mysql_error());  


header('Location: results.php');
?>

最后，这是验证码：

$(document).ready(function(){
// Place ID's of all required fields here.
required = ["firstname", "lastname", "email"];
// If using an ID other than #email or #error then replace it here
email = $("#email");
errornotice = $("#error");
// The text to show up within a field when it is incorrect
emptyerror = "Please fill out this field.";
emailerror = "Please enter a valid e-mail.";

$("#theform").submit(function(e){                

    //Validate required fields
    for (i=0;i<required.length;i++) {
        var input = $('#'+required[i]);
        if ((input.val() == "") || (input.val() == emptyerror)) {
            input.addClass("needsfilled");
            input.val(emptyerror);
            errornotice.fadeIn(750);
        } else {
            input.removeClass("needsfilled");
        }
    }
    // Validate the e-mail.
    if (!/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(email.val())) {
        email.addClass("needsfilled");
        email.val(emailerror);
    }

    //if any inputs on the page have the class 'needsfilled' the form will not submit
    if ($("input").hasClass("needsfilled")) {
         e.preventDefault();
    } else {
         errornotice.hide();
    }


});

// Clears any fields in the form when the user clicks on them
$(":input").focus(function(){       
   if ($(this).hasClass("needsfilled") ) {
        $(this).val("");
        $(this).removeClass("needsfilled");
   }
});
});

Answer 1

您的代码（种类）适合我 - 表单未提交。但是，我可以建议您使用Jquery-validation-plugin吗？ http://docs.jquery.com/Plugins/validation

Answer 2

我看到您正在覆盖提交功能以验证您的表单。如果你在表单元素中使用onSubmit，我想你可能会有更好的运气。

<form method="post" action="send.php" id="theform" name="theform" onSubmit="return validateMyForm();">

<script>
function validateMyForm(){

//Validate required fields
    for (i=0;i<required.length;i++) {
        var input = $('#'+required[i]);
        if ((input.val() == "") || (input.val() == emptyerror)) {
            input.addClass("needsfilled");
            input.val(emptyerror);
            errornotice.fadeIn(750);
            return false; //keeps the form from submitting
        } else {
            input.removeClass("needsfilled");
        }
    }
    // Validate the e-mail.
    if (!/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(email.val())) {
        email.addClass("needsfilled");
        email.val(emailerror);
        return false; //keeps the form from submitting
    }

    //if any inputs on the page have the class 'needsfilled' the form will not submit
    if ($("input").hasClass("needsfilled")) {
         e.preventDefault();
         return false; //keeps the form from submitting
    } else {
         errornotice.hide();
    }

    return true; //this means none of the above things returned false, meaning everything is validated correctly

</script>

冲突的Javascript阻止表单验证

2 个答案: