как скрыть проверку ошибок в Java script

#javascript #html

#javascript #HTML

Вопрос:

Приведенный ниже код работает, но я хочу внести некоторые изменения в этот код.

Когда пользователь не заполняет поле, отображается окно с ошибкой, которое работает, но после заполнения оно должно исчезнуть. Поэтому, пожалуйста, кто-нибудь, помогите мне решить проблему.

Я разместил здесь код, включая html и Java script, поэтому просто скопируйте и запустите его, он будет работать и попытается решить мою проблему.

    <html>
   <head>
   <script type="text/javascript">
  function validate()
          {

  var fname = document.form.Name.value;
  var lname = document.form.Lame.value;
  var same  = document.form.Same.value;

  if( fname == "" )
   {
     document.form.Name.focus() ;
     document.getElementById("errorBox1").innerHTML = "enter the first name";
     return false;
   }

   if( lname == "" )
   {
     document.form.Lame.focus() ;
     document.getElementById("errorBox2").innerHTML = "enter the last name";
     return false;
   }

  if( same == "" )

   {
     document.form.Same.focus() ;
     document.getElementById("errorBox3").innerHTML = "enter the Same name";
     return false;
   }
    }

    </script>
    </head>
     <body>
 <form name="form" >


 SSS :<input type="text" name="Name" value=""  class="input_name" ><div    id="errorBox1"> </div>
  <br> 
   SSmjhjk :<input type="text" name="Lame" value=""  class="input_name" ><div id = "errorBox2"></div>
  <br> 

 nngb :<input type="text" name="Same" value=""  class="input_name" ><div id = "errorBox3"></div>


    <input type=button  onClick="validate()" value=check> 

         </form>
 

Ответ №1:

В моем первом уведомлении у вас есть синтаксическая ошибка в вашем скрипте. В вашем последнем условии вы написали код, подобный if else if( same == "" ) . Это неправильно.

Если вы хотите одновременно проверять и отображать ошибку для всех текстовых полей, вам необходимо удалить свойство return из скрипта. Обновите свой скрипт, как показано ниже.

 function validate()
{
 var fname = document.form.Name.value;
 var lname = document.form.Lame.value;
 var same  = document.form.Same.value;
 document.getElementById("errorBox1").innerHTML ="";
 document.getElementById("errorBox2").innerHTML ="";
 document.getElementById("errorBox3").innerHTML ="";
 if( fname == "" )
 {
      document.getElementById("errorBox1").innerHTML = "enter the first name";
 }

 if( lname == "" )
 {

 document.getElementById("errorBox2").innerHTML = "enter the last name";
 }

 if( same == "" )
 {

 document.getElementById("errorBox3").innerHTML = "enter the Same name";
 }
}
 

HTML

   <form name="form" >


  SSS :<input type="text" name="Name" value="" class="input_name" onkeyup="validate();" /><div id="errorBox1"> </div>
     <br> 
     SSmjhjk :<input type="text" name="Lame" onkeyup="validate();" value=""  class="input_name" /><div id = "errorBox2"></div>
     <br> 
  nngb :<input type="text" name="Same" onkeyup="validate();" value=""  class="input_name" /><div id = "errorBox3"></div>

  <input type="button" onclick="validate();" value="check" /> 

     </form> 
 

Демонстрация скрипки

Комментарии:

1. смотрите, ваш код работает с некоторым улучшением, за что спасибо, но мой вопрос в другом: после отображения ошибки при вводе значений в соответствующее поле это сообщение об ошибке должно исчезнуть, прежде чем нажать кнопку отправки… пожалуйста, помогите мне здесь

2. Обновил мой ответ. проверьте это.

3. большое вам спасибо за то , что он работает … можете ли вы предложить еще одну вещь, например, показывать один раз все поля, которые я хочу, например, когда мы перемещаем одно поле за другим, например, это должно отображаться только для определенного пустого поля, а не для всех полей…. вы поняли, к чему я клоню?

4. проверьте эту скрипку jsfiddle.net/sureshponnukalai/87bxK/1 ты выглядишь примерно так же??

5. когда я навожу курсор на первое поле, оно отображается для оставшихся двух других полей, даже если я не касался тех полей, которые мне не нужны, пожалуйста, предложите мне….

Ответ №2:

Попробуйте это, это может сработать для вас

 function validate() {
    var fname = document.form.Name.value;
    var lname = document.form.Lame.value;
    var same = document.form.Same.value;
    if (fname == "") {
        document.form.Name.focus();
        document.getElementById("errorBox1").innerHTML = "enter the first name";
        return false;
    } else {
        document.getElementById("errorBox1").innerHTML = "";
    }

    if (lname == "") {
        document.form.Lame.focus();
        document.getElementById("errorBox2").innerHTML = "enter the last name";
        return false;
    } else {
        document.getElementById("errorBox2").innerHTML = "";
    }

    if (same == ""){
        document.form.Same.focus();
        document.getElementById("errorBox3").innerHTML = "enter the Same name";
        return false;
    } else {
        document.getElementById("errorBox3").innerHTML = "";
    }
}
 

используйте тип ввода, подобный этому

 <input type="text" id="fname" onkeyup="validate()">
 

Это поможет вам

Комментарии:

1. он не работает только так …. я хочу, чтобы при вводе текста и переходе к следующему окну сообщение об ошибке исчезло без нажатия кнопки отправки

2. @sourav78611 попробуйте сейчас.

3. onkeyup=»validate()»> я не могу использовать это, потому что после ввода одной буквы курсор автоматически переходит в следующее поле … поэтому, пожалуйста, предложите мне что-нибудь получше спасибо, братан, за вашу помощь, пожалуйста, помогите здесь..

4. @sourav78611 удалите все три строки focus (), затем попробуйте, это обязательно сработает

5. эта строка document.form.Name.focus(); rite?

Ответ №3:

Если вы хотите использовать только javascript, вы можете скрыть div ошибки:

 document.getElementById("errorBox1").style.display = 'none';
 

Комментарии:

1. а как насчет этой строки? document.getElementById(«errorBox1»).innerHTML = «введите первое имя»; ……….? вы говорите .style.display тогда как он будет отображать сообщение