键输入后jQuery淡出警告

时间:2012-02-12 17:35:55

标签: javascript jquery validation

当用户点击提交按钮时,

if(ns1 == '' && ns2 == '')为空,用户将收到此警告Please fill in both nameserver。我想在用户点击ns1文本框并开始输入时淡出警告。我怎么能实现这一目标?请帮帮我?谢谢。

 <script type="text/javascript">
$(document).ready(function(){

        $('#submitButton').click(function(){

                var rege = /^([a-z0-9][a-z0-9-]*\.)+[a-z]{2,3}\.$/i;


        var zone = $('#zone').val();
        var nama_subdomain = $('#nama_subdomain').val();
        var ns1 = $('#ns1').val();
        var ns2 = $('#ns2').val();

if(ns1 == '' && ns2 == ''){
$('#display').html('Please fill in both nameserver'); 
$("#ns1").focus();
return false;
} 

if(ns1 == ''){
$('#display').html('Please fill in nameserver 1'); 
$("#ns1").focus();
     return false; 
} 
else if(ns2 == ''){
$('#display').html('Please fill in nameserver 2'); 
$("#ns2").focus();
     return false; 
} 

var parts = ns1.split('.');
var parts2 = ns2.split('.');

if (parts.length < 3 || !rege.test(ns1)) 
{ $('#display').html('Invalid nameserver 1 format'); 
$("#ns1").focus();
return false;
}
else if (parts2.length < 3 || !rege.test(ns2)) 
{ $('#display').html('Invalid nameserver 2 format'); 
$("#ns2").focus();
return false;
}


        $('#display').html('<img src="http://i.imgur.com/UbMeQ.gif"> saving...');
            $.post('pros.php', {
                zone : zone,
                nama_subdomain : nama_subdomain,
                nameserver1 : ns1,
                nameserver2 : ns2
            },
             function(zone) {

           $('#display').html(zone);
             } 
          );


        });
    });


    </script>


html:

    <label for="data">Nameserver 1</label>
            <input type="text" class="textInput" maxlength="255" size="30" value="" id="ns1" name="nameserver1">


            <label for="data">Nameserver 2</label>
            <input type="text" class="textInput" maxlength="255" size="30" value="" id="ns2" name="nameserver2">

    <div id="display" style="color: green;">

<button id="submitButton" value="Save" type="button"><span>Save</span></button>

2 个答案:

答案 0 :(得分:1)

在该条件上附加一个keypress事件处理程序,这将淡出消息,然后在用户键入任何内容后解除绑定。

if(ns1 == '' && ns2 == ''){
   $('#display').html('Please fill in both nameserver'); 
   $("#ns1").focus()
   .unbind('keypress')
   .keypress(function(){
      if(this.value != ''){
         //fade out the message
         $('#display').fadeOut();

         //unbind the keypress event we don't need it now
         $(this).unbind('keypress');
      }
   });
   return false;
}

对其他文本框执行相同操作。

答案 1 :(得分:0)

这应该按照你描述的方式工作:

$(document).ready(function(){

        $('#submitButton').click(function(){

                var rege = /^([a-z0-9][a-z0-9-]*\.)+[a-z]{2,3}\.$/i;


        var zone = $('#zone').val();
        var nama_subdomain = $('#nama_subdomain').val();
        var ns1 = $('#ns1').val();
        var ns2 = $('#ns2').val();

if(ns1 == '' && ns2 == ''){
$('#display').show().html('Please fill in both nameserver'); 
$("#ns1").focus();
return false;
} 

if(ns1 == ''){
$('#display').show().html('Please fill in nameserver 1'); 
$("#ns1").focus();
     return false; 
} 
else if(ns2 == ''){
$('#display').show().html('Please fill in nameserver 2'); 
$("#ns2").focus();
     return false; 
} 

var parts = ns1.split('.');
var parts2 = ns2.split('.');

$('#ns1, #ns2').keypress(function(){
    $('#display').fadeOut();
});