Php 冲突的Javascript阻止表单验证_Php_Javascript_Jquery

Php 冲突的Javascript阻止表单验证

php javascript jquery

Php 冲突的Javascript阻止表单验证,php,javascript,jquery,Php,Javascript,Jquery,我在我的页面上得到了一些表单验证，如果字段尚未完成，则会显示一个错误，但由于某些原因，表单正在提交，即使字段为空。。。如果错误被保留为空白，我需要将其显示出来希望有人能看到问题，因为我不能：( 当只测试它自己的时候，它似乎起作用了，所以我认为有些东西与它相冲突：这是我的表单页面代码： <script> $(function() { $("#datepicker").datepicker({ altField: '#date' }); $('#submit

我在我的页面上得到了一些表单验证，如果字段尚未完成，则会显示一个错误，但由于某些原因，表单正在提交，即使字段为空。。。如果错误被保留为空白，我需要将其显示出来

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

当只测试它自己的时候，它似乎起作用了，所以我认为有些东西与它相冲突：

这是我的表单页面代码：

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


$（函数（）{
$（“#日期选择器”）。日期选择器({
altField:“#日期”
});
$（“#提交”）。单击（函数（）{
$（'#output'）.html（$（'form'）.serialize（））；
});
});
你能猜到艾丽·麦考斯特什么时候会被解雇吗？？？
var _gaq=_gaq | |[]；
_gaq.push（[''设置帐户'，'UA-9915379-4']）；
_gaq.push（[''u trackPageview']）；
（功能（）{
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）；
})();







Ally McCoist将于


函数fbs_click（）{u=location.href；t=document.title；window.open（'http://www.facebook.com/sharer.php?u=“+encodeURIComponent（u）+”&t=“+encodeURIComponent（t），“共享器”，“工具栏=0，状态=0，宽度=626，高度=436”）；返回false；}html.fb_共享链接{填充：2px 0 20px；高度：16px；背景：url(http://static.ak.facebook.com/images/share/facebook_share_icon.gif?6:26981)不重复左上角；}


（功能（）{
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>
        $(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");
   }
});
});

您的代码（某种程度上）适合我-表单没有提交。但是我可以建议您改用Jquery验证插件吗？
我看到您正在覆盖提交函数以验证表单。如果您在表单元素中使用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>


函数validateMyForm（）{
//验证必填字段
对于（i=0；我刚刚尝试过使用jquery代码，它可以工作，但是它从页面上删除了我的jquery UI日期选择器，这没有真正的帮助，所以我不得不再次删除它。我定义了，我与导致问题的Jquary UI日期选择器有关，但我无法确定这是什么太烦人了。我一直在尝试为abo解决这个问题ut 2周后，我仍然无法对itreturn true进行排序；如果您希望它提交。通过这种方式，您可以控制是否希望表单提交。如果验证失败，则返回false，并可能提示用户修复验证失败的原因。如果所有验证都通过，则返回true。我将false更改为true，但表单仍然提交即使这些字段还没有填满，也会被删除