Проверка на стороне клиента не публикует значения

Question

У меня есть форма, которая проверяет значение за раз. Когда все значения проверяются и корректируются, моя функция сообщения ajax не хочет публиковать сообщения. Я бы хотел опубликовать сообщение, когда все значения верны. Одно текстовое поле имеет имя, последнее текстовое поле - электронное письмо.

Пожалуйста, проверьте мои jsFiddle и код ниже.

HTML:

<form enctype="multipart/form-data" method="post" id="myform" name="myform_1"> 
    <input type="text" value="" id="name" name="myname" /> 
    <input type="text" value="" id="email" name="myemail"/> 
    <input type="submit" value="Valid" id="validate" name="validate"/> 
</form> 

Javascript:

$(document).ready(function(){ 
    function checkLength(o, n, min, max) { 
     if (o.val().length > max || o.val().length < min) 
     { 
      o.css("background-color","#F30"); 
      return false; 
     } 
     else 
     { 
      o.css("background-color","#FFF"); 
      return true; 
     } 
    } 

    function checkRegexp(o, regexp, n) { 
     if (!(regexp.test(o.val()))) 
     { 
      o.css("background-color","#F30"); 
      return false; 
     } 
     else 
     { 
      o.css("background-color","#FFF"); 
      return true; 
     } 
    } 

    //Click action 
    $("#validate").click(function() 
    { 
     var name = $("#name"); 
     var email = $("#email"); 
     var valid = true; 
     emailRegex = /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/ 

     valid = valid && checkLength(name,"Please enter a name",3,6); 
     valid = valid && checkRegexp(name, /^[a-z]([A-Z_\s])+$/i, "Name may consist of a-z, and 3 or more characters."); 
     valid = valid && checkLength(email, "email", 6, 80); 
     valid = valid && checkkRegexp(email, emailRegex, "eg. ui@jquery.com"); 
     //Email 
     //alert ($("#myform").serialize()); 
     //End of Email 

     if(valid) 
     { 
      var request = $.ajax({ 
       url: "inc/newsletter.php", // Ofcourse this would be your addLike.php in your real script 
       type: "POST", 
       data: $("#myform").serialize() 
      }); 
      request.done(function(msg) { 
       alert("Your details have been saved"); 
       location.reload(); 
      }); 

      request.fail(function(jqXHR, textStatus) { 
       alert("Request failed: " + textStatus); 
      }); 

      return valid; 
     } 
     else 
     { 
      alert("No;") 
     } 
    }); 
}); 

Answer 1

Ваш отправить обработчик события не возвращает ложь, поэтому она полностью разместить форму. Во-первых, убедитесь, что пузыриться событие останавливается в обработчик щелчка следующим образом:

$("#validate").click(function(event) 
{ 
     //YOUR AJAX CALL 
     //RETURN SHOULD ALWAYS BE FALSE FOR AJAX SUBMISSION WHEN CALLED FROM TYPE BUTTON 
     event.preventDefault(); 
     event.stopPropagation(); 
     return false; 
}) 

Вы можете проследить, если вызов Ajax происходит в консоли браузера ...

Надеюсь, что это помогает!

Answer 2

Друг, вы называете эту функцию «checkkRegexp», которая не существует !!

И вы должны вернуть false в конце вашей функции, чтобы предотвратить отправку формы, если какая-либо проверка не соответствует действительности!

Вы также должны взглянуть на «петрушку». Это поможет вам с проверкой формы.

Answer 3

Изменить начало вашей функции как этот

$("#validate").click(function(e){ 
    e.preventDefault(); 
    //Rest of your function 
} 

e.preventDefault() не является кросс-браузер совместим и может сломаться в старых браузерах. Используйте, если вы поддерживаете старые браузеры

if(e.preventDefault()!=undefined){ 
    e.preventDefault(); 
}else{ 
    e.returnValue = false; 
} 

Если вам интересно узнать, почему ваш подход не работает. Кнопка, которую вы нажимаете, является кнопкой отправки, и вы не предотвращаете ее поведение по умолчанию. Это причина, по которой форма отправляется, даже если поля формы неполны.

Обратите внимание, что все еще ajax cal не будет вызываться в примере, но это будет естественное обновление формы.

Предлагаемое решение остановит действие по умолчанию и даст полный контроль над вашим аякс-запросом и валидностью