添加CSS动态

$(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-\.][email protected]([\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>

我写了这个代码的形式validation..here如果我点击提交，而无需输入它应该显示文本框颜色的值，并且“缺少必填字段”在顶部页面..我添加的代码..但是当我点击提交没有输入值..“警报”类应该只适用于div ..不适用于文本框..是我的代码是否正确？

来源

2016-12-16 moksha

并不清楚你所问这里。 – Afsar

当我点击提交没有值..文本框的颜色必须改变..并在页面顶部我应该显示错误消息..输入值后，我想隐藏它 – moksha

你的意思是没有按下提交按钮，你想在字段上隐藏这些错误颜色？ – Bharat

这里是我的代码以下面的链接经历值后，以删除类可能是这可以帮助你解决您的错误 -

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-\.][email protected]([\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; 
    } 
    }); 
});

来源

2016-12-16 07:40:13

其工作..但我可以应用风格只为错误消息？ – moksha

@moksha错误消息中需要什么类型的样式？ –

@moksha我可以修改我的小提琴链接，并回答请通过它现在可以给你一个新的错误信息，每当输入字段将清空。 –

您可以输入添加事件进入这样

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

看看这个fiddle

来源

2016-12-16 07:32:08 Afsar

添加CSS动态

回答

相关问题