嘗試使用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附帶了Wordpress，因此我將其用於表單驗證。 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還有一個很棒的驗證插件 ，它將為您完成許多困難的工作。

如果您需要非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>