Ошибка проверки формы jQuery

Question

Может кто-нибудь сказать мне, что не так с моей проверкой jQuery? Это не подтверждает мою форму, а просто игнорирует код, в результате чего не происходит проверки входов.

Форма:

<form class="form" accept-charset="UTF-8" action="URL-to-complete-form" method="POST" onsubmit="return validateForm();"> 
<input class="form-name" type="text" placeholder="Name"></div> 
<input class="form-email" type="text"placeholder="Email"></div> 
<input style="background-color: #fc8f12;" type="submit" value="Subscribe"> 
</div> 
</form> 

Javascript:

function validateForm() 
{ 
    // Validate Name 
    var title = $(".form-name").val(); 
    if (title=="" ||title=="Name" || title==null) { } else { 
     alert("Please enter a name!"); 
    } 

    // Validate Email 
    var email = $(".form-email").val(); 
    if ((/(.+)@(.+){2,}\.(.+){2,}/.test(email)) || email=="" || email=="Email" || email==null) { } else { 
     alert("Please enter a valid email"); 
    } 
    return false; 
} 

Спасибо всем за ваше время и помощь.

Answer 1

Для меня похоже, что вы ничего не предпринимаете, чтобы предотвратить отправку формы, потому что у вас есть строка «action =» в форме ... вы говорите ей, чтобы отправить, оба запускаются функцию javascript и отправьте форму. Вы должны иметь javascript, чтобы отправить форму после ее проверки. Существует множество способов сделать это ... Вероятнее всего, проще всего сделать кнопку отправки кнопкой типа вместо типа submit, а затем привязать проверку и подчинение клику по этой кнопке.

Answer 2

Поскольку вы «вмешиваетесь» в отправку postback, чтобы сделать проверку, сдвиньте свой код так, чтобы он был чистым, удалите кнопку отправки из формы, выполните проверку на основе нажатия кнопки и сделайте свою собственную обратную отправку формы с действующим данные:

<form class="form" accept-charset="UTF-8" method="POST" action="#"> 
     <input class="form-name" type="text" placeholder="Name"></div> 
     <input class="form-email" type="text" placeholder="Email"></div> 
     </div> 
    </form> 
    <button>Subscribe</button> 

$(function() { 
      $('button').on('click', function (event) { 
       validateForm(); 
      }); 

     }); 

     function validateForm() { 
      // Validate Name 
      var title = $(".form-name").val(); 
      if (!title) { 
       alert("Please enter a name!"); 
       return false; 
      } 

      // Validate Email 
      var email = $(".form-email").val(); 
      if (!email) { 
       alert("Please an email address"); 
       return false; 
      } 

      if (!/(.+)@(.+){2,}\.(.+){2,}/.test(email)) { 
       alert("Please enter a valid email"); 
       return false; 
      } 

      $.post('URL-to-complete-form', $("form").serialize(), function (data) { 
       console.log('server call complete'); 
       console.log(data); 
      }); 

     } 

Вот рабочий jsFiddle тоже: http://jsfiddle.net/t8vQ2/

Answer 3

HTML:

<form id="form1" ... 

JQuery:

$("#form1").on("submit", function(){ 
    if($("input[name=firstName]").val() == ""){ 
    // errors here 
    return false; 
    } 
});