jQuery Validation Pluginを使用した時、フォームが検証済みになった時にボタンを有効にする #JavaScript

バリデーションが通ったら送信ボタンを有効にする

jQueryのValidationプラグインには、これを設定するところはないので、自分で書く必要があるみたいです。

script

$('input,textarea').on('keyup blur', function() {
    var $submitBtn = $('button[type=submit]');
    if ($("#myform").valid()) {
        $submitBtn.prop('disabled', false);  
    } else {
        $submitBtn.prop('disabled', 'disabled');
    }
});

完成コード

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Activate button if a form is valid.</title>
</head>
<body>
<form id="myform">
<p><input type="text" id="field" name="name" placeholder="おなまえ"></p>
<p><textarea name="comment" placeholder="コメント"></textarea></p>
<p><button type="submit" disabled="disabled">送信</button></p>
</form>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://jqueryvalidation.org/files/dist/jquery.validate.min.js"></script>
<script>
$( "#myform" ).submit(function(e){
    e.preventDefault();
}).validate({
  submitHandler: function(form){
    form.submit();
  },
  rules: {
    name: {
      required: true,
      rangelength: [2, 10]
    },
    comment :{
        required: true,
    }
  }
});
$('input,textarea').on('keyup blur', function() {
    var $submitBtn = $('button[type=submit]');
    if ($("#myform").valid()) {
        $submitBtn.prop('disabled', false);  
    } else {
        $submitBtn.prop('disabled', 'disabled');
    }
});
</script>
</body>
</html>