如何在HTML中添加表单验证? [英] How to add form validation in HTML?
本文介绍了如何在HTML中添加表单验证?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个表格:
<form method="post">
<input type="text" name="name" placeholder="Name :" data-required="true" data-type="Name">
<input type="text" name="email" placeholder="Email:" data-required="true" data-type="Email">
<input type="text" name="phone" placeholder="Phone Number:" data-required="true" data-type="Phone">
<select>
<option value="" disabled selected>College Name:</option>
<option>College 1</option>
<option>College 2</option>
<option>College 3</option>
<option>College 4</option>
<option>College 5</option>
<option>College 6</option>
</select>
<select>
<option value="" disabled selected>Enquiry Type:</option>
<option>MD/MS Coaching</option>
<option>MDS Coaching</option>
<option>DNB Coaching</option>
</select>
<textarea>Message</textarea>
<button class="btn btn-info" type="submit">Submit</button>
</form>
现在,我需要向每个字段添加验证消息,例如在该字段下方以红色显示文本.
Now, I need to add the validation message to each field like displaying the text in red color below the field.
我对Javascript或JQuery不太了解.
I don't know much about Javascript or JQuery.
请帮助我将验证添加到字段中.
Please help me in adding the validation to fields.
推荐答案
尽管您可以使用HTML5本身进行验证,但我通常使用jQuery Validate Plugin.
Although you can do the validations with HTML5 itself, I generally use jQuery Validate Plugin.
您需要jQuery
,然后包含jQuery Validate Plugin
库.
您这样验证.我只验证了名称字段.您可以将其推广到其他领域.
Your validate like this. I have validated only for name field. You can take it forward for other fields.
var self = this;
$(document).ready(function() {
// Right way, as suggested by @Sparky in the comments below, is to have attache validation code to the form only once.
$("#myForm").validate({
rules: {
'name': { // this is value of the name attribute of your field
required: true,
},
'email': {
required: true,
// regex: 'regex for email field goes here'
}
},
messages: {
'name': {
required: "Name is required"
},
'email': {
required: "Email is required",
//regex: 'Error response for regex fail goes here'
}
}
});
$(".submit").click(function() {
// Do a check each time before submit
if (!$("#myForm").valid())
alert("Form has validation errors. Cannot submit!!");
else {
alert("Form can be submitted!!");
// do jQuery form submit here
}
});
});
.error {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.js"></script>
<form method="post" id="myForm">
<input type="text" name="name" placeholder="Name :" data-required="true" data-type="Name">
<input type="text" name="email" placeholder="Email:" data-required="true" data-type="Email">
<input type="text" name="phone" placeholder="Phone Number:" data-required="true" data-type="Phone">
<select>
<option value="" disabled selected>College Name:</option>
<option>College 1</option>
<option>College 2</option>
<option>College 3</option>
<option>College 4</option>
<option>College 5</option>
<option>College 6</option>
</select>
<select>
<option value="" disabled selected>Enquiry Type:</option>
<option>MD/MS Coaching</option>
<option>MDS Coaching</option>
<option>DNB Coaching</option>
</select>
<textarea>Message</textarea>
<button class="btn btn-info submit">Submit</button>
</form>
这篇关于如何在HTML中添加表单验证?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文