我正在为CodeCademy做一个项目系列，我在系列中有一个项目，使用JavaScript / jQuery进行客户端表单验证。
我的HTML是：
<!DOCTYPE html>
<html>
<head>
<title>Form Validation</title>
<link rel='stylesheet' href='stylesheet.css' type='text/css'/>
<script type='text/javascript' src='script.js'></script>
</head>
<body>
<form>
First Name : <input type='text' id='fname' placeholder='Enter First Name'><br><br>
Last Name : <input type='text' id='lname' placeholder='Enter Last Name'><br><br>
Age : <input type='text' id='age' placeholder='Age'><br><br>
Sex : <input type='radio' class='sex'> Male <input type='radio' class='sex'> Female
</form>
<button id='submit'>Submit</button>
</body>
</html>
我的JavaScript / jQuery是：
$(document).ready(function()
{
var fname = document.getElementById('fname').val();
var lname = document.getElementById('lname').val();
var age = document.getElementById('age').val();
/*Do not know how to get element by class and that too, two different type. Have to check if user chose anything or not*/
$("#submit").click(function()
{
if(fname.length === 0)
{
alert("Please input a first name");
}
else if(lname.length === 0)
{
alert("Please input a last name");
}
else if(age.length === 0)
{
alert("Please input an age");
}
});
});
我不需要非常复杂的代码，如果出现问题或者需要在那里添加某些内容，请在HTML部门帮助我。
另外，我不知道如何在课堂上获得不同的元素。我已经在我的jQuery中发表了评论，所以如果可以，请帮忙。
这是CodeCademy项目中的一个问题，这是JS和jQuery中很多新手都有问题的地方，所以如果你能提供帮助，它会帮助很多人而不仅仅是我。
谢谢！
答案 0 :(得分：7)
您需要使用.value代替.val()，因为您使用的是纯Javascript：
var fname = document.getElementById('fname').value;
var lname = document.getElementById('lname').value;
var age = document.getElementById('age').value;
如果你想使用.val()方法，那么你需要一个jQuery对象：
var fname = $('#fname').val();
var lname = $('#lname').val();
var age = $('#age').val();
您还需要将这些变量放在.click()处理程序中以获取这些文本框的更新值，目前您只检索页面加载的值，该值始终等于0：
$(document).ready(function () {
$("#submit").click(function () {
var fname = document.getElementById('fname').value;
var lname = document.getElementById('lname').value;
var age = document.getElementById('age').value;
if (fname.length == 0) {
alert("Please input a first name");
} else if (lname.length == 0) {
alert("Please input a last name");
} else if (age.length == 0) {
alert("Please input an age");
}
});
});
<强> Fiddle Demo
答案 1 :(得分：1)
答案 2 :(得分：0)
从您的示例中，按类名获取元素
var lists = document.getElementsByClassName("sex");
要访问特定值使用lists[0].value它将返回“男性”或lists[1].value将返回“女性”
如果您使用原生/纯JavaScript，请使用.value而不是val()。 val()仅适用于jquery
答案 3 :(得分：0)
看起来你一次要问几个问题。
作为suzonraj，指出您需要document.getElementsByClass按类名获取元素，而且正如Felix指出的那样，您需要将数据放在.click事件中以获取当前值，不是页面.ready值。
我将补充说，你应该将name参数添加到你的收音机盒中，这样它们实际上就像收音机盒一样 - 当点击另一个时关闭一个。有了这个，你可以使用document.getElementsByName，这正是你在收音机收集之后所做的。
就验证而言，您需要按名称或类来浏览元素数组，然后验证至少有一个元素是.checked。
以下是基于代码Felix共享的示例：http://jsfiddle.net/5zqW7/8/
另外一个问题是，对所有元素进行验证，而不是直到第一个失败的元素。这对用户来说更具沟通性，因为它会识别所有错误的字段，而不仅仅是第一个，点击提交，然后是第二个，依此类推。在一个真实的形式中，无论如何，你可能会有一些不如alert()的声音。这可能不是您的任务所必需的。
答案 4 :(得分：0)
这是使用jquery
进行表单验证的非常简单的方法
// Wait for the DOM to be ready
$(function() {
// Initialize form validation on the registration form.
// It has the name attribute "registration"
$("form[name='registration']").validate({
// Specify validation rules
rules: {
// The key name on the left side is the name attribute
// of an input field. Validation rules are defined
// on the right side
firstname: "required",
lastname: "required",
email: {
required: true,
// Specify that email should be validated
// by the built-in "email" rule
email: true
},
password: {
required: true,
minlength: 5
}
},
// Specify validation error messages
messages: {
firstname: "Please enter your firstname",
lastname: "Please enter your lastname",
password: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long"
},
email: {
required: "Please provide a valid user name",
email: "Please enter a valid email address"
}
},
// Make sure the form is submitted to the destination defined
// in the "action" attribute of the form when valid
submitHandler: function(form) {
form.submit();
}
});
});@import url("https://fonts.googleapis.com/css?family=Open+Sans");
/* Styles */
* {
margin: 0;
padding: 0;
}
body {
font-family: "Open Sans";
font-size: 14px;
}
.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;
}
label.error {
color: #ff0000;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src='https://cdn.jsdelivr.net/jquery.validation/1.15.1/jquery.validate.min.js'></script>
<div class="container">
<h2>Registration</h2>
<form action="" name="registration">
<label for="email">Email</label>
<input type="email" name="email" id="email" placeholder="john@doe.com" />
<label for="password">Password</label>
<input type="password" name="password" id="password" placeholder="●●●●●" />
<button type="submit">Register</button>
</form>
</div>
答案 5 :(得分：0)
function validate() {
var scheduledOn = $("#ScheduledOn").val();
var status = $(".Status option:selected").text();
var result = true;
if (id == "") {
var scheduledOn = $("#ScheduledOn").val();
var category = $(".categoryList option:selected").text();
var activityTask = $(".activityTaskList option:selected").text();
var lead = $("#LeadID").val();
var agent = $("#AgentID").val();
if (category == "Select Category") {
$("#categoryValidation").show();
$("#categoryValidation").text("The Category field is required");
}
else {
$("#categoryValidation").hide();
}
if (category == "Agent Recruitment" || category == "Direct Sales" || category == "Joint Field Work" || category == "Select Category" || category == "Agent Development") {
var activityTask = $(".activityTaskList option:selected").text();
if (activityTask == "Select Activity Task") {
$("#activityTaskValidation").show();
$("#activityTaskValidation").text("The Activity Task field is required");
}
else {
$("#activityTaskValidation").hide();
}
}
if (category == "Joint Field Work") {
if (agent == "" || agent == "Select Agent") {
$("#agentValidation").show();
$("#agentValidation").text("The Agent field is required");
result = false;
}
else {
$("#agentValidation").hide();
}
}
if (category == "Joint Field Work") {
if (lead == "" || lead == null || lead == "Select Lead") {
$("#leadValidation").show();
$("#leadValidation").text("The Lead field is required");
result = false;
}
else {
$("#leadValidation").hide();
}
}
if (category == "Agent Recruitment" || category == "Agent Development") {
if (agent == "" || agent == "Select Agent") {
$("#agentValidation").show();
$("#agentValidation").text("The Agent field is required");
result = false;
}
else {
$("#agentValidation").hide();
}
}
if (category == "Direct Sales") {
if (lead == "" || lead == "Select Lead" || lead == null) {
$("#leadValidation").show();
$("#leadValidation").text("The Lead field is required");
result = false;
}
else {
$("#leadValidation").hide();
}
}
if (scheduledOn == "" || scheduledOn == null) {
$("#scheduledOnValidation").show();
$("#scheduledOnValidation").text("The Scheduled On field is required");
result = false;
}
else if (Date.parse(scheduledOn) <= Date.now()) {
$("#scheduledOnValidation").show();
$("#scheduledOnValidation").text("The Scheduled On field should be greater than current date time");
result = false;
}
else {
$("#scheduledOnValidation").hide();
}
return result;
}
else {
var scheduledOn = $("#NewScheduledOn").val();
var status = $(".Status option:selected").text();
if (document.getElementById("SetAppointment_Y").checked) {
var activityTask = $(".activityTaskList").val();
if (activityTask == null || activityTask == "") {
$("#activityTaskValidation").show();
$("#activityTaskValidation").text("The Activity Task field is required");
result = false;
}
else {
$("#activityTaskValidation").hide();
$("#scheduledOnValidation").hide();
}
if (status != null && (scheduledOn == "" || scheduledOn == null)) {
$("#scheduledOnValidation").show();
$("#scheduledOnValidation").text("The Scheduled On field is required");
$("#statusValidation").hide();
result = false;
}
else if (Date.parse(scheduledOn) <= Date.now()) {
$("#scheduledOnValidation").show();
$("#scheduledOnValidation").text("The Scheduled On field should be greater than current date time");
result = false;
}
else {
$("#scheduledOnValidation").hide();
$("#statusValidation").show();
}
}
}
return result;
}