在jquery中动态添加css答案

【问题标题】：adding css dynamically in jquery在jquery中动态添加css
【发布时间】：2016-12-16 07:12:44
【问题描述】：

$(document).ready(function(){

    $("#submit").click(function(){


         var userinput = $('#username').val();
         var mobilenumber=$('#mobnum').val();
         var address1=$('#addr1').val();
         var address2=$('#addr2').val();

         var characterReg = /^([a-zA-Z]{2,30})$/;
         var numericReg=/^\d*[0-9](|.\d*[0-9]|,\d*[0-9])?$/;
         var emailReg=/^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
         var addrReg = /^\s*[a-zA-Z0-9,\s]+\s*$/;

         var errors=false;

        if(!characterReg.test(userinput)){
             $('#username').addClass('box alert');
            errors=true;
        }else{
            $('#username').removeClass('box alert');
        }
        if(!numericReg.test(mobilenumber)){
            $('#mobnum').addClass('box alert');
            errors=true;
        }else{
            $('#mobnum').removeClass('box alert');
        }
        if($('#mail').val()==''){
            $('#mail').addClass('box alert');
            errors=true;
        }else{
            $('#mail').removeClass('box alert');
        }
        if($('#pwd').val()==''){
            $('#pwd').addClass('box alert');
            errors=true;    
        }else{
            $('#pwd').removeClass('box alert');
        }
        if(!addrReg.test(address1)){
            $('#addr1').addClass('box alert');
            errors=true;
        }else{
            $('#addr1').removeClass('box alert');
        }
        if(!characterReg.test(address2)){
            $('#addr2').addClass('box alert');
            errors=true;    
        }else{
            $('#addr2').removeClass('box alert');
        }
        if(errors){
            return false;
        }else{
            return true;
        }
    }); 
});

.box{
            border-color: red;
        }
        .alert{
            color:#a94442;
            background-color: #f2dede;
            border:#ebccd1;
            opacity: 1;
            padding:10px;
        }
        form{
            margin-top:20px;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
     <link rel="stylesheet" type="text/css" href="style.css">
     <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
     <script type="text/javascript" src="script.js"></script>
  </head>
<body>
<div class="alert">
    "Missing required field"
</div>
 <form method="post" id="user_form">

        NAME <br>
        <input type="text" name="username" id="username" class="req" ><br>
        MOBILE NUMBER <br>
        <input type="text" name="mobnum" id="mobnum" class="req" maxlength="10"><br>
        E-MAIL <br>
        <input type="email" name="mail" id="mail" class="req" ><br>    
        PASSWORD <br>
        <input type="password" name="pwd" id="pwd" class="req" ><br>    
        ADDRESS 1<br>
        <input type="text" name="addr1" id="addr1" class="req" ><br>
        ADDRESS 2<br>
        <input type="text" name="addr2" id="addr2" class="req" ><br>
        <button type="submit"  id="submit">Submit</button>

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

我为表单验证编写了这段代码..如果我点击提交而不输入任何值，它应该在页面顶部显示文本框颜色和“缺少必填字段”..我为此添加了代码..但是当我在不输入值的情况下单击提交 ..“警报”类应仅适用于 div ..不适用于文本框 ..我的代码是否正确？

【问题讨论】：

不清楚你在这里问什么。
当我点击没有值的提交时..文本框颜色必须更改..在页面顶部我应该显示错误消息..输入值后我想隐藏它
您的意思是不按提交按钮就想隐藏字段上的错误颜色？

标签： jquery

【解决方案1】：

这是我的代码，下面的链接可能可以帮助您解决错误-

JSFiddle

HTML 代码：

<div class="alert">
  "Missing required field"
</div>
<form method="post" id="user_form">

  NAME
  <br>
  <input type="text" name="username" id="username" class="req">
  <br> MOBILE NUMBER
  <br>
  <input type="text" name="mobnum" id="mobnum" class="req" maxlength="10">
  <br> E-MAIL
  <br>
  <input type="email" name="mail" id="mail" class="req">
  <br> PASSWORD
  <br>
  <input type="password" name="pwd" id="pwd" class="req">
  <br> ADDRESS 1
  <br>
  <input type="text" name="addr1" id="addr1" class="req">
  <br> ADDRESS 2
  <br>
  <input type="text" name="addr2" id="addr2" class="req">
  <br>
  <button type="submit" id="submit">Submit</button>

</form>

CSS 代码：

.box {
  border-color: red;
}

.alert {
  color: #a94442;
  background-color: #f2dede;
  border: #ebccd1;
  opacity: 1;
  padding: 10px;
}

form {
  margin-top: 20px;
}

JAVASCRIPT 代码：

$(document).ready(function() {
$('div.alert').hide();


$("#submit").click(function() {
    $('input.alert').removeClass('alert box');
    var userinput = $('#username').val();
    var mobilenumber = $('#mobnum').val();
    var address1 = $('#addr1').val();
    var address2 = $('#addr2').val();
    var characterReg = /^([a-zA-Z]{2,30})$/;
    var numericReg = /^\d*[0-9](|.\d*[0-9]|,\d*[0-9])?$/;
    var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
    var addrReg = /^\s*[a-zA-Z0-9,\s]+\s*$/;

    var errors = false;

    if (!characterReg.test(userinput)) {
      $('#username').addClass('box alert');
      $('#username').focus();
      $('div.alert').text('Missing required field - *Name*');
      $('div.alert').show();
      errors = true;
    } else {
      $('#username').removeClass('box alert');
    }
    if (errors == false && !numericReg.test(mobilenumber)) {
      $('#mobnum').addClass('box alert');
      $('#mobnum').focus();
      $('div.alert').text('Missing required field - *Mobile Number*');
      $('div.alert').show();
      errors = true;
    } else {
      $('#mobnum').removeClass('box alert');
    }
    if (errors == false && $('#mail').val() == '') {
      $('#mail').addClass('box alert');
      $('#mail').focus();
      $('div.alert').text('Missing required field - *E-Mail*');
      $('div.alert').show();
      errors = true;
    } else {
      $('#mail').removeClass('box alert');
    }
    if (errors == false && $('#pwd').val() == '') {
      $('#pwd').addClass('box alert');
      $('#pwd').focus();
      $('div.alert').text('Missing required field - *Password*');
      $('div.alert').show();
      errors = true;
    } else {
      $('#pwd').removeClass('box alert');
    }
    if (errors == false && !addrReg.test(address1)) {
      $('#addr1').addClass('box alert');
      $('#addr1').focus();
      $('div.alert').text('Missing required field - *Address Line 1*');
      $('div.alert').show();
      errors = true;
    } else {
      $('#addr1').removeClass('box alert');
    }
    if (errors == false && !characterReg.test(address2)) {
      $('#addr2').addClass('box alert');
      $('#addr2').focus();
      $('div.alert').text('Missing required field - *Address Line 2*');
      $('div.alert').show();
      errors = true;
    } else {
      $('#addr2').removeClass('box alert');
    }
    if (errors) {
      return false;
    } else {
      return true;
    }
  });
});

【讨论】：

它的工作..但我可以只为错误消息应用样式吗？
@moksha 你希望错误信息的样式是什么？
@moksha 我可以修改我的小提琴链接并回答也请通过它现在可以在任何输入字段为空时为您提供新的错误消息。
我添加了警报类对吗？.. 该类应该只显示错误消息...而不是那个文本框..
我的荣幸 :) @moksha

【解决方案2】：

您可以在输入这样的值后添加一个事件以删除类

 $('#user_form > input').each(function(){
    $(this).keypress(function(){
     $(this).removeClass('box alert')
    }
 );})

看看这个fiddle

【讨论】：