0
このコードが動作しない理由を知っている人はいますか？送信時に「見つからない」ページに移動するだけです。私はLearning Jquery.comからそのほとんどをコピーしましたが、それでも動作しません。私のIDと名前が一致するので、それはできません。サイトは、おそらくJQueryライブラリをダウンロードする必要があると言っていたが、確かにライブラリにリンクするだけでもうまくいくだろうと言った。 最初のスニペットは、そこに私はjQueryライブラリにリンクするために使用SRCを見ることができます（jQueryの、第二私のCSSおよび第三私のHTMLです。Jqueryを使用してフォームを検証する
$("#contactForm").validate({
//specify the validation rules
rules: {
firstname: "required",
lastname: "required",
email: {
required: true,
email: true //email is required AND must be in the form of a valid email address
},
password: {
required: true,
minlength: 6
}
},
//specify validation error messages
messages: {
firstname: "First Name field cannot be blank!",
lastname: "Last Name field cannot be blank!",
password: {
required: "Password field cannot be blank!",
minlength: "Your password must be at least 6 characters long"
},
email: "Please enter a valid email address"
},
submitHandler: function(form) {
form.submit();
}
});.form-container {
width: 500px;
margin: 25px auto;
}
form {
padding: 20px;
background: #2c3e50;
color: #fff;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
form label,
form input,
form button {
border: 0;
margin-bottom: 3px;
display: block;
width: 100%;
}
form input {
height: 25px;
line-height: 25px;
background: #fff;
color: #000;
padding: 0 6px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
form button {
height: 30px;
line-height: 30px;
background: #e67e22;
color: #fff;
margin-top: 10px;
cursor: pointer;
}
form .error {
color: #ff0000;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
<div class="form-container">
<h2>Registration</h2>
<form action="#" name="contactForm" id="contactForm">
<label for="firstname">First Name</label>
<input type="text" name="firstname" id="firstname" placeholder="John" />
<label for="lastname">Last Name</label>
<input type="text" name="lastname" id="lastname" placeholder="Doe" />
<label for="email">Email</label>
<input type="email" name="email" id="email" placeholder="[email protected]" />
<label for="password">Password</label>
<input type="password" name="password" id="password" placeholder="●●●●●" />
<button type="submit">Submit</button>
</form>
フォームに 'action'がありません –
「見つからない」ページのURLは何ですか？ *そのURLは機能するはずですか？どうして？ページを読み込むと、ブラウザのデバッグコンソールにエラーがありますか？ jQueryをロードしましたか？ – David
https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.jsおよびhttps://ajax.googleapis.com/のcdnリンクで質問を更新しました。 ajax/libs/jquery/2.1.1/jquery.min.js。あなたのコードは期待どおりに動作するようです。 –