Как плагин проверки данных JQuery работает над действием отправки - PullRequest
Новая
       14

Как плагин проверки данных JQuery работает над действием отправки

1 голос
/ 18 мая 2010

Я изучаю, как использовать плагин проверки JQuery,
и натолкнулся на некоторые вопросы
о магии JQuery, которая работает с действием sumbit.
Я получил простую HTML-форму, в которой есть текстовое поле ввода: 

<form class="cmxform" id="commentForm" method="get" action="">
<input id="cname" name="name" size="25" class="required" minlength="2" />
<input class="submit" type="submit" value="Submit"/>
</form>

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

Казалось, что есть некоторые сценарии, которые отключают действие отправки,
но я просто не смог найти строки кода в плагине JQuery Validatyion, который это сделал.
Я хочу узнать, как это работает, на примерах.

Ответы [ 3 ]

1 голос
/ 18 мая 2010

попробуйте следующее, чтобы понять это:

поместите это на странице 

<script type="text/javascript">
$(document).ready(function() { 
 $("#btnSubmit").click(function(){confirm("Are you sure ?");});
});

</script>

вы увидите, что если вы нажмете на кнопку отмены, действие отправки не произойдет. Вот почему, когда вы возвращаете false в кнопке, вы отменяете обратную передачу, когда вы возвращаете true, происходит обратная передача.

1 голос
/ 18 мая 2010

Я бы изменил кнопку отправки на кнопку, чтобы вы не путали действие. После чего вы вручную отправите форму после ее проверки. Это будет выглядеть примерно так: 

<head>
<script type="text/javascript">

  //form validation setup
  var setupFormValidation = function(){

      //bind the click event to the new button with id submit-form
      $("#submit-form").click(function(){
          submitForm();
      });

      //setup validation on commentForm
      $("#commentForm").validate({
          errorLabelContainer: $("div#formerror"),
            rules: {
               name: { required: true }
            },
            messages:{
               name: "please enter your name"       
            }
     });

  }

  //define submitForm function
  //this manually submits form
  var submitForm = function(){
    document.cmxForm.submit();
  } 

  //document loaded 
    $(document).ready(function() {
      //set up your form validation
    setupFormValidation();            
  }); 

</script>

</head>


<!-- add your form error div -->
<div id="formerror"></div>


<!-- added name = cmfForm -->
<form class="cmxform" id="commentForm" method="get" action="" name="cmxForm">
<input id="cname" name="name" size="25" class="required" minlength="2" />

<!-- changed from submit to button with id of submit-form for jquery -->
<input type="button" class="submit" id="submit-form" value="Submit"/>

</form>
0 голосов
/ 18 мая 2010

Если вы просматриваете примеров для JQuery Validate, следующий код убивает действие отправки. 

$.validator.setDefaults({
    submitHandler: function() { alert("submitted!"); }
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...