不使用jQuery插件进行名称验证

I'm looking to validate First & Last name in jQuery. I don't want to use jQuery validation plugin due to project requirements.

我想在jQuery中验证First&Last名称。由于项目要求,我不想使用jQuery验证插件。

This is what I intend to achieve :

这是我打算实现的目标:

If both the input boxes are empty the error message should indicate the 2nd input box being empty (eg... Yahoo Sign-up Page)

如果两个输入框都为空,则错误消息应指示第二个输入框为空(例如... Yahoo Sign-up Page)

If one of the input box is filled, the empty box should be highlighted in red along with the error message.

如果其中一个输入框已填满,则空框应以红色突出显示并显示错误消息。

Where do I place other validation code like the one that denies special characters and numbers in each box ?

我在哪里放置其他验证码,例如拒绝每个框中特殊字符和数字的验证码?

As soon as validation passes, both the box should turn green.

验证通过后,盒子都应变为绿色。

HTML code:

<html>
   <head>
   <script type="text/javascript" src="jquery-1.11.2.js"></script>
    <script type="text/javascript" src="retail_banking_validation.js"></script>
    <link rel="stylesheet" type="text/css" href="retail_banking.css" >
</head>
<body>

<form action=""  name="myForm" method="get" >  
<div id="container"> 
    <fieldset> 
        <legend>Login Page</legend>
             <div class="first_container">Name</div>
                <div id ="nameBlock">
                    <input type="text" name="fname" placeholder="First" id="cust_fname" />
                    <input type="text" name="lname" placeholder="Last"  id="cust_lname" /><br>
                </div>

                <div id="name_error_msg"></div><br>

    </fieldset>
</div> 

</form>
</body>
</html>

jQuery Code:

$(document).ready(function() {
      var fname = $('#cust_fname');
      var lname = $('#cust_lname');
      var error_msg = $('#name_error_msg'); 
      var regex  = /^[A-Za-z\s`~!@#$%^&*()+={}|;:'",.<>\/?\\-]+$/ ;


    $("input").blur(function(){       

        if( $(fname).val().length === 0) {  

              $(error_msg).text("First name can't be empty");
              $(this).css("border", "1px solid red");
              return false}


          else if($(lname).val().length === 0) {
               $(error_msg).text("Last name can't be empty");             
                  $(this).css("border", "1px solid red");
                  return false; }

        $(error_msg).text("");
        $(this).css("border", "1px solid green");  

          });

    });

CSS code:

fieldset {
    width: 30%;
    border: solid 1px black;}

legend {
    color: black;
    font-style: italic;
    font-size: 15px;
    border: solid 1px black;
    margin: 25px; }

.first_container {
    padding: 3px;
    width: 150px;
    font-style: italic;
    font-weight: bold;
    color: #a77;}

#nameBlock {
    display: inline-block;}

#cust_fname {
    margin: 3px;
    padding: 5px;
    width: 170px;}

#cust_lname {
    margin: 5px;
    padding: 5px;
    width: 170px;}

#name_error_msg{
 margin: 5px;
 color: red; }

Current behavior of the code:

代码的当前行为:

When the tab bypasses both the empty input box, the error message is displayed as "First name can't be empty"

当选项卡绕过空输入框时,错误消息显示为“名字不能为空”

whereas it should be as "Last name can't be empty"

而它应该是“姓不能为空”
Let's say, if we move by filling the 1st box to 2nd box, the 1st box color still remains red.

比方说,如果我们将第一个盒子填充到第二个盒子,第一个盒子颜色仍然是红色。

By convention, it should have turned "green" as we move the focus away. (considering validation is passed)

按惯例,当我们将焦点移开时,它应该变成“绿色”。 (考虑通过验证)
Moreover, as we input something in 2nd input box and move further, this time only the 2nd box turns "green". (considering validation is passed)

此外,当我们在第二个输入框中输入内容并进一步移动时,此时只有第二个框变为“绿色”。 (考虑通过验证)

whereas the 1st box color is still "red"

而第一盒颜色仍为“红色”
Now, to turn the 1st box "green", we have to travel vertically up from 2>1>2 (denotes index of box)

现在,要将第一个框变为“绿色”,我们必须从2> 1> 2垂直向上移动(表示框的索引)

1 个解决方案

#1

Not wanting or being able to use a plugin like jQuery Validation can give you a bunch of extra work. It can be frustrating, but treat it like disecting an animal, you can now see what the functions you use actually do.

不想或无法使用像jQuery Validation这样的插件可以为您提供一堆额外的工作。它可能令人沮丧,但是它像对待动物一样对待它,你现在可以看到你实际使用的功能。

Now the first thing we can see is when we look at your jQuery function:

现在我们首先看到的是当我们查看你的jQuery函数时:

$("input").blur(function() {

  if ($(fname).val().length === 0) {

    $(error_msg).text("First name can't be empty");
    $(this).css("border", "1px solid red");
    return false;
  } else if ($(lname).val().length === 0) {
    $(error_msg).text("Last name can't be empty");
    $(this).css("border", "1px solid red");
    return false;
  }
  // Add if statement for 
  $(error_msg).text("");
  $(this).css("border", "1px solid green");

});

Let's put your blur() code into words so you will understand it too.

我们将你的blur()代码放入单词中,这样你就可以理解它了。

If the First Name input element is empty, show an error message, and make the border of the current element bright red and exit the if statement.

如果First Name输入元素为空,则显示错误消息,并使当前元素的边框变为红色并退出if语句。

If the First Name element is not empty, but the Last Name element IS empty, show an error message and make the border of the current element bright red.

如果First Name元素不为空,但Last Name元素为空,则显示错误消息并使当前元素的边框变为红色。

If no elements are empty, make the border of the current element green.

如果没有元素为空,则将当前元素的边框设置为绿色。

So this helps understand what your code is doing wrong:

这有助于理解您的代码出错了什么:

If the First Name input element or both elements is/are empty, "First name can't be empty" is always shown because of the return false; which exits your if statement.

如果First Name输入元素或两个元素都为空,则始终显示“First name not empty”,因为返回false;退出你的if语句。

When everything is filled in, only the element you are currently filling in will change its border when the blur() event is called because you use this in $(this).css("border", "1px solid green"); meaning only the current input element that called the blur event will get a green border. When you click the input box of the First Name, and then click outside of it, the blur event is now called for that input element, and it will get the green border too. Now I assume this is not what you want.

当所有内容都被填充时,只有当前填充的元素会在调用blur()事件时更改其边框,因为您在$(this).css(“border”,“1px solid green”)中使用它;意味着只有调用模糊事件的当前输入元素才会获得绿色边框。当您单击名字的输入框,然后单击其外部时,现在为该输入元素调用模糊事件,它也将获得绿色边框。现在我认为这不是你想要的。

So, what does your code have to do?

那么,您的代码必须做什么?

The page should display the error message for the last field that you focused out of.

该页面应显示您聚焦的最后一个字段的错误消息。

Empty input elements should get a red border after the blur() event is called

调用blur()事件后,空输入元素应该会出现红色边框

Some fields should deny special characters and numbers

某些字段应拒绝特殊字符和数字

Both boxes have to turn green if validation succeeds.

如果验证成功,则两个框都必须变为绿色。

$(document).ready(function() {
  var fname = $('#cust_fname');
  var lname = $('#cust_lname');
  var error_msg = $('#name_error_msg');
  var regex = /^[A-Za-z\s`~!@#$%^&*()+={}|;:'",.<>\/?\\-]+$/;

  var checkForm = function() {

    $('#nameBlock input').each(function() {
      if ($(this).attr('name') === 'fname' && $(this).val().length === 0) {
        $(error_msg).text("First name can't be empty");
        $(this).css('border', '1px solid red');
      } else if ($(this).attr('name') === 'lname' && $(this).val().length === 0) {
        $(error_msg).text("Last name can't be empty");
        $(this).css('border', '1px solid red');
      } else {
        $(this).css('border', '1px solid green');
      }
    });
  };

  $('#nameBlock input').blur(function() {
    if ($(this).val().length === 0) {
      switch ($(this).attr('name')) {
        case 'fname':
          $(error_msg).text("First name can't be empty");
          $(this).css('border', '1px solid red');
          break;
        case 'lname':
          $(error_msg).text("Last name can't be empty");
          $(this).css('border', '1px solid red');
          break;
        default:
          $(error_msg).text("");
          break;
      }
    } else {
      $(error_msg).text("");
      $(this).css('border', '1px solid green');
      checkForm();
    }

  });

});

fieldset {
  width: 30%;
  border: solid 1px black;
}
legend {
  color: black;
  font-style: italic;
  font-size: 15px;
  border: solid 1px black;
  margin: 25px;
}
.first_container {
  padding: 3px;
  width: 150px;
  font-style: italic;
  font-weight: bold;
  color: #a77;
}
#nameBlock {
  display: inline-block;
}
#cust_fname {
  margin: 3px;
  padding: 5px;
  width: 170px;
}
#cust_lname {
  margin: 3px;
  padding: 5px;
  width: 170px;
}
#name_error_msg {
  margin: 5px;
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<form action="" name="myForm" method="get">
  <div id="container">
    <fieldset>
      <legend>Login Page</legend>
      <div class="first_container">Name</div>
      <div id="nameBlock">
        <input type="text" name="fname" placeholder="First" id="cust_fname" />
        <input type="text" name="lname" placeholder="Last" id="cust_lname" />
      </div>

      <div id="name_error_msg"></div>
      <br>

    </fieldset>
  </div>

</form>

So, instead of your if statement, I have used switch cases. I have looked at Yahoo's pages and am simulating this behavior of their name block in my code. I have also added a checkForm function which checks the whole block of inputs to see if any inputs are not valid. Now my code does the following:

所以,我使用了switch case而不是你的if语句。我查看了Yahoo的页面,并在我的代码中模拟了它们名称块的这种行为。我还添加了一个checkForm函数,它检查整个输入块以查看是否有任何输入无效。现在我的代码执行以下操作:

Check current field, if empty, give it a red border and display an error based on the field's name attribute.

检查当前字段,如果为空,则为其指定一个红色边框,并根据字段的name属性显示错误。

If it's not empty, set the border as green.

如果它不为空,请将边框设置为绿色。

Also, execute the checkForm function, which goes by all inputs and checks them again, just in case a previous field is empty.

此外,执行checkForm函数,该函数将通过所有输入并再次检查它们,以防前一个字段为空。

Display an error if an empty field is found by checkForm.

如果checkForm找到空字段,则显示错误。

Feel free to comment if you have any questions.

如果您有任何疑问,请随时发表评论。

#1