CODEWITHSUNDEEP
javascriptjqueryvalidation
sg552
sg552

Reputation: 1543

jQuery fade out warning after key input

if(ns1 == '' && ns2 == '') is empty than user will get this warning Please fill in both nameserver when user click submit button. I want to fade out the warning when user click ns1 textbox and start typing. How could I achieve that? Help me please? Thank you.

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


The 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>

Upvotes: 0

Views: 1013

Answers (2)

ShankarSangoli
ShankarSangoli

Reputation: 69915

Attach a keypress event handler on that condition which will fade out the message and then unbind it once the user types anything.

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

Do the same for other textbox.

Upvotes: 1

skimberk1
skimberk1

Reputation: 2094

This should work exactly the way you described:

$(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();
});

Upvotes: 0

Related Questions