フォームをカスタマイズして必須フィールドを検証しましたが、すべてのフィールドが正しく入力されていても送信しません。私の理解から、jquery.validate.min.jsは送信をブロックします。誰かが私のフォームが提出しない理由を知っていますか?Jquery検証フォームが投稿されていません
コードは以下の通りです:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://jqueryvalidation.org/files/dist/jquery.validate.min.js"></script>
<script src="http://jqueryvalidation.org/files/dist/additional-methods.min.js"></script>
<link rel="stylesheet" href="http://jqueryvalidation.org/files/demo/site-demos.css">
</head>
<div>
<form id="myform" method="POST" action="">
<label for="fname">First Name *: </label>
<input id="fname" name="fname">
<br/>
<label for="lname">Last Name *: </label>
<input id="lname" name="lname">
<br/>
<label for="email">Email *: </label>
<input id="email" name="email">
<br/>
<label for="jtitle">Job Title *: </label>
<input id="jtitle" name="jtitle">
<br/>
<label for="orgname">Organization *: </label>
<input id="orgname" name="orgname">
<br/>
<label for="orgname">Describe Yourself *: </label>
<input id="desyourself" name="desyourself" type="hidden" value="123">
<select id="desyourself" name="desyourself">
<option value="">
Choose One... </option>
<option value="124">
Customer
</option>
<option value="125">
Partner
</option>
<option value="126">
Prospect
</option>
<option value="127">
Other
</option>
<option value="128">
Misc.
</option>
</select>
<br/>
<input type="submit" value="Validate!">
</form>
</div>
<script>
// avoids form submit
jQuery.validator.setDefaults({
debug: true,
success: "valid"
});
$.validator.methods.email = function(value, element) {
return this.optional(element) || /^([\w-\.][email protected](?!gmail.com)(?!yahoo.com)(?!hotmail.com)([\w-]+\.)+[\w-]{2,4})?$/.test(value);
}
$("#myform").validate({
rules: {
fname: {
required: true,
minlength: 1,
maxlength: 30,
lettersonly: true
},
lname: {
required: true,
minlength: 1,
maxlength: 30,
lettersonly: true
},
email: {
required: true,
email: true
},
jtitle: {
required: true,
minlength: 1,
maxlength: 30
},
orgname: {
required: true,
minlength: 1,
maxlength: 30
},
desyourself: {
required: true,
}
}
});
</script>
コンソールで任意のJavaスクリプトエラー? –
_ "私のフォームが提出しないのはなぜですか?" _入力、選択要素に '' desyourself "' 'id'と' name'属性を重複していますか? 'javascript'は期待される結果を返すために必要ではないことに注意してください。 'HTML5'の' required'属性を使うことができます – guest271314