Question

我正在为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中很多新手都有问题的地方，所以如果你能提供帮助，它会帮助很多人而不仅仅是我。

谢谢！

Answer 1

您需要使用.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

Answer 2

查看这个简单的插件

http://suraj-mahajan.github.io/Validate-In-Grid-Controls/

Answer 3

从您的示例中，按类名获取元素

var lists = document.getElementsByClassName("sex");

要访问特定值使用lists[0].value它将返回“男性”或lists[1].value将返回“女性”

如果您使用原生/纯JavaScript，请使用.value而不是val()。 val()仅适用于jquery

Answer 4

看起来你一次要问几个问题。

作为suzonraj，指出您需要document.getElementsByClass按类名获取元素，而且正如Felix指出的那样，您需要将数据放在.click事件中以获取当前值，不是页面.ready值。

我将补充说，你应该将name参数添加到你的收音机盒中，这样它们实际上就像收音机盒一样 - 当点击另一个时关闭一个。有了这个，你可以使用document.getElementsByName，这正是你在收音机收集之后所做的。

就验证而言，您需要按名称或类来浏览元素数组，然后验证至少有一个元素是.checked。

以下是基于代码Felix共享的示例：http://jsfiddle.net/5zqW7/8/

另外一个问题是，对所有元素进行验证，而不是直到第一个失败的元素。这对用户来说更具沟通性，因为它会识别所有错误的字段，而不仅仅是第一个，点击提交，然后是第二个，依此类推。在一个真实的形式中，无论如何，你可能会有一些不如alert()的声音。这可能不是您的任务所必需的。

Answer 5

这是使用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="&#9679;&#9679;&#9679;&#9679;&#9679;" />
    <button type="submit">Register</button>
  </form>
</div>

Answer 6

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;
}

如何使用JavaScript / jQuery进行简单的客户端表单验证？

6 个答案: