Попытка проверить несколько полей в HTML-форме Wordpress, используя Javascript

Question

У меня есть HTML-форма с двумя полями для подписки на рассылку.Одно поле для имени, другое - для электронной почты.

Я хочу проверить оба поля, которые вводятся, а также действительный адрес электронной почты.

Я относительный новичок, но имеюзаимствовал код, читал, исследовал, смотрел видео и проигрывал, но лучшее, что я смог добиться, - это проверка электронной почты, которую я позаимствовал на www.w3schools.com.

Код, который я имею в своем заголовке Wordpress.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 поставляется с jQuery, поэтому я бы использовал его для проверки вашей формы.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 не останавливает вашу проверку.В случае чего может быть ошибка скрипта.Вы можете убедиться в этом, открыв инструменты разработчика ваших браузеров.Например, Firebug в FF или нажатие клавиши F12 в Chrome или IE9.

Я просто перечитал ваш вопрос, и похоже, что вы опубликовали свой рабочий код, а не нерабочий код.Трудно отлаживать, не видя неработающий код.Вот как я бы проверил наличие пустых полей в вашем решении 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>