validationEngineエラーの有無判定について

###前提・実現したいこと
validationEngineを使用しているのですが、エラー表示がなくなったタイミングで送信ボタンをアクティブにしたいです。

###該当のソースコード

<form action="" method="post" id="form1" name="send">
					<input type="hidden" name="UserID" value="hinata">
					<input type="hidden" name="MagazineID" value="64">
					<input type="hidden" name="HTMLMail" value="1">
					<input type="hidden" name="MoreItem" value="1">
					<div id="mailwrap">
						<div id="address_area">
							<p>お名前をご入力ください。</p>
							<p><input type="text" name="name" class="input1 validate[required]"></p>
							<p>メールアドレスをご入力ください。</p>
							<p><input type="email" name="email" class="input3 validate[required,custom[email]] mail-address"></p>
						</div><!-- end address_area -->    
					</div><!-- end meilma-wrap --> 
					<input type="image" alt="送信" src="image/btn.png" class="btn" id="send_button" disabled="disabled">
					</form>

s8_chu

2017/04/04 03:09 編集

validationEngineとはjQuery-Validation-Engine( https://github.com/posabsolute/jQuery-Validation-Engine )のことでしょうか？

行動規範の内容に同意します

回答1件

ベストアンサー

質問者さんが使用しているvalidationEngineがjQuery-Validation-Engineならば、以下のように行ってはいかがでしょうか？

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <title>タイトル</title>
6    <link rel="stylesheet"
7          href="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/validationEngine.jquery.min.css">
8    <style type="text/css">
9        * {
10            margin: 0;
11            padding: 0;
12        }
13    </style>
14</head>
15<body>
16<form action="page.php" method="post" id="form1" name="send">
17    <input type="hidden" name="UserID" value="hinata">
18    <input type="hidden" name="MagazineID" value="64">
19    <input type="hidden" name="HTMLMail" value="1">
20    <input type="hidden" name="MoreItem" value="1">
21    <div id="mailwrap">
22        <div id="address_area">
23            <p>
24                <label>お名前をご入力ください。
25                    <input type="text" name="name" class="input1 validate[required]">
26                </label>
27            </p>
28            <p>
29                <label>メールアドレスをご入力ください。
30                    <input type="email" name="email" class="input3 validate[required,custom[email]] mail-address">
31                </label>
32            </p>
33        </div><!-- end address_area -->
34    </div><!-- end meilma-wrap -->
35    <input type="image" alt="送信" src="image/btn.png" class="btn" id="send_button" disabled="disabled">
36</form>
37<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
38<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/jquery.validationEngine.min.js"></script>
39<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/languages/jquery.validationEngine-ja.min.js"></script>
40<script>
41    $(function () {
42        $("#form1").validationEngine("attach", {focusFirstField: false});
43
44        $("input").on("input", function () {
45            if ($("#form1").validationEngine("validate")) {
46                $("#send_button").prop("disabled", false);
47            } else {
48                $("#send_button").prop("disabled", true);
49            }
50        });
51
52        $("#send_button").on("click", function () {
53            if ($("#form1").validationEngine("validate")) {
54                $("#form1").submit();
55            }
56        });
57    });
58</script>
59</body>
60</html>

#追記

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <title>タイトル</title>
6    <link rel="stylesheet"
7          href="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/validationEngine.jquery.min.css">
8    <style type="text/css">
9        * {
10            margin: 0;
11            padding: 0;
12        }
13    </style>
14</head>
15<body>
16<form action="page.php" method="post" id="form1" name="send">
17    <input type="hidden" name="UserID" value="hinata">
18    <input type="hidden" name="MagazineID" value="64">
19    <input type="hidden" name="HTMLMail" value="1">
20    <input type="hidden" name="MoreItem" value="1">
21    <div id="mailwrap">
22        <div id="address_area">
23            <p>
24                <label>お名前をご入力ください。
25                    <input type="text" name="name" class="input1 validate[required]">
26                </label>
27            </p>
28            <p>
29                <label>メールアドレスをご入力ください。
30                    <input type="email" name="email" class="input3 validate[required,custom[email]] mail-address">
31                </label>
32            </p>
33        </div><!-- end address_area -->
34    </div><!-- end meilma-wrap -->
35    <input type="image" alt="送信" src="" class="btn" id="send_button" disabled="disabled">
36</form>
37<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
38<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/jquery.validationEngine.min.js"></script>
39<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/languages/jquery.validationEngine-ja.min.js"></script>
40<script>
41    $(function () {
42        $("#form1").validationEngine("attach", {focusFirstField: false});
43
44        $("input").on("input", function () {
45            if ($("#form1").validationEngine("validate")) {
46                $("#send_button").prop({"disabled": false, "src": "image/btn.png"});
47            } else {
48                $("#send_button").prop({"disabled": true, "src": ""});
49            }
50        });
51
52        $("#send_button").on("click", function () {
53            if ($("#form1").validationEngine("validate")) {
54                $("#form1").submit();
55            }
56        });
57    });
58</script>
59</body>
60</html>