Функция запуска jquery по KeyUp вместо отправки

Question

У меня есть этот код, который проверяет, является ли URL-адрес действительным.

Прямо сейчас проверка выполняется нажатием кнопки. Но я хочу избавиться от кнопки и вместо этого просто выполнить проверку, когда пользователь что-то печатает в текстовом поле или когда он заканчивает печатать.

Как мне этого добиться? Я совсем не знаком с jquery.

<script src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>
<script type="text/javascript">
jQuery.validator.setDefaults({
    debug: true,
    success: "valid"
});;
</script>

  <script>
  $(document).ready(function(){
    $("#myform").validate({
  rules: {
    field: {
      required: true,
      url: true
    }
  }
});
  });
  </script>
  <style>#field { margin-left: .5em; float: left; }
    #field, label { float: left; font-family: Arial, Helvetica, sans-serif; font-size: small; }
    br { clear: both; }
    input { border: 1px solid black; margin-bottom: .5em;  }
    input.error { border: 1px solid red; }
    label.error {
        background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/unchecked.gif') no-repeat;
        padding-left: 16px;
        margin-left: .3em;
    }
    label.valid {
        background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/checked.gif') no-repeat;
        display: block;
        width: 16px;
        height: 16px;
    }
</style>


<form id="myform">
  <label for="field">Required, URL: </label>
  <input class="left" id="field" name="field" OnKeyUp="$("#myform").validate"/>
  <br/>
  <input type="submit" value="Validate!" />
</form>

Answer 1

Посмотрите на код ниже.Я думаю, это то, что вам нужно.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<script type="text/javascript">
jQuery.validator.setDefaults({
    debug: true,
    success: "valid"
});;
</script>

  <script>
  $(document).ready(function(){
    $("#myform").validate({
  rules: {
    field: {
      required: true,
      url: true
    }
  }
});

$("#field").keyup(function(){
$('#myform').valid();
});
  });
  </script>
  <style>#field { margin-left: .5em; float: left; }
    #field, label { float: left; font-family: Arial, Helvetica, sans-serif; font-size: small; }
    br { clear: both; }
    input { border: 1px solid black; margin-bottom: .5em;  }
    input.error { border: 1px solid red; }
    label.error {
        background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/unchecked.gif') no-repeat;
        padding-left: 16px;
        margin-left: .3em;
    }
    label.valid {
        background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/checked.gif') no-repeat;
        display: block;
        width: 16px;
        height: 16px;
    }
</style>


<form id="myform">
  <label for="field">Required, URL: </label>
  <input class="left" id="field" name="field"/>
  <br/>
  <input type="submit" value="Validate!" />
</form>

Answer 2

Вы должны быть в состоянии оценить один элемент с помощью метода element на валидаторе:

$(document).ready(function() {
    var $validator = $("#myform").validate({
        rules: {
            field: {
                required: true,
                url: true
            }
        }
    });

    $("#field").keyup(function () {
        $validator.element(this);
    });
});

Это будет проверять #field на каждом keyup событии.

Вот пример: http://jsfiddle.net/bp8wP/

Answer 3

Вы можете использовать функцию change(), которая описана на этой странице

http://api.jquery.com/change/

, чтобы перехватить, когда вы измените текст в поле ввода, а затем щелкнете и затем применитеваш валидатор.