尝试使用 Javascript 在 Wordpress HTML 表单中验证多个字段

Question

我有一个用于订阅时事通讯的两字段 HTML 表单。一个字段是名字，另一个是电子邮件。

我想验证输入的两个字段以及电子邮件地址是否有效。

我是一个相对初学者，但我已经借用代码、阅读、研究、观看视频和玩耍，但我能做到的最好的是我从 www.w3schools.com 借来的电子邮件验证。

我的 Wordpress header.php 文件中的代码是

<script type="text/javascript">
function validateForm() {
var x=document.forms["newslettersignup"]["bm_email"].value;
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");

    if (atpos<1 || dotpos<atpos+2 || dotpos+1>=x.length)
    {
    alert("Please enter a valid e-mail address");
    return false;
    }
}
</script>

我希望表单显示的 Wordpress 页面正文中的代码是

<form name="newslettersignup" action="/wp-content/plugins/pommo/user/process.php" onsubmit="return validateForm()" method="POST">


Name<input type="text" class="text" style="width: 150px;" name="d[1]" id="d[1]"/>

Email<input type="text" class="text" style="width: 150px;" name="bm_email" id="bm_email" value="" />    

</form>

无论我尝试为这两个字段添加空字段验证，都会停止上述工作。当我拥有它就像它在警报上方时一样完美。

这是阻止我使用网络上众多示例中的任何一个来验证多个字段的 Wordpress 问题吗？

感谢您的帮助。

Answer 1

Wordpress 带有 jQ​​uery，所以我会使用它来代替您的表单验证。 jQuery 是 javascript，但它的语法更容易理解，它还有助于在不同浏览器版本之间进行规范化。这是您的用例的示例：

http://jsfiddle.net/khVtB/

<!-- I added id's so it would be easy to get your form elements. I noticed that you used brackets in your ids. I think this is illegal. Use letters and numbers. -->
<form name="newslettersignup" action="/wp-content/plugins/pommo/user/process.php" onsubmit="return validateForm()" method="POST" id="signupform">
  Name <input type="text" class="text" style="width: 150px;" name="name" id="yourname"/>
  Email <input type="text" class="text" style="width: 150px;" name="email" id="youremail" value="" />    
</form>

 

$('#signupform').submit(function() {
    if ($('#yourname').val().length == 0) {
        alert('no name');
        return false;
    }

    if ($('#youremail').val().indexOf('@') == -1) {
        alert('bad email');
        return false;
    }

    return true;
});

jQuery 还有一个很棒的validation plugin，它会为你做很多这些困难的事情。

如果您需要非 jQuery 解决方案，那么我也可以提供帮助，但我认为这可能是一个更好的方法。我可以向您保证，Wordpress 不会停止您的验证。如果有的话，可能是脚本错误。你可以通过打开你的浏览器开发者工具来看到这一点。例如 FF 中的 Firebug，或者在 Chrome 或 IE9 中按 F12。

我刚刚重读了您的问题，看起来您发布了您的工作代码，而不是您的非工作代码。很难在没有看到无效代码的情况下进行调试。以下是我将如何检查您的 javascript 解决方案中的空字段。

<script type="text/javascript">
function validateForm() {
  var y=document.forms["newslettersignup"]["d"].value; //dont use brackets in names or id's
  var x=document.forms["newslettersignup"]["bm_email"].value;
  var atpos=x.indexOf("@");
  var dotpos=x.lastIndexOf(".");
    if (x.length == 0 || y.length == 0) { return false; }       

    if (atpos<1 || dotpos<atpos+2 || dotpos+1>=x.length)
    {
    alert("Please enter a valid e-mail address");
    return false;
    }
  }
</script>