Нажатие кнопки «Отправить» сбрасывает значения всех полей (Java Script)

Когда я нажимаю кнопку «Отправить», мне нужно проверить длины полей «Имя» и «Имя отца», и если они превышают 20 символов, мне нужно отобразить сообщение об ошибке перед текстовым полем красным цветом. Мой код работает нормально, за исключением того, что он отображает сообщения об ошибках, и каждая вещь исчезает через секунду. Мне нужны сообщения об ошибках, чтобы остаться там. Вот моя функция ява скрипт:Нажатие кнопки «Отправить» сбрасывает значения всех полей (Java Script)

<head> 
     <script type="text/javascript"> 
     function validate() 
     { 
      var firstName=document.f1.firname.value; 
      var fatherName=document.f1.fname.value; 
      var address=document.f1.add.value; 
      var phoneNumber=document.f1.ph.value; 
      var cnic=document.f1.cnic.value; 
      var email=document.f1.email.value; 
      var cgpa=document.f1.fname.value; 
      var sem=document.f1.sem.value; 
      var id=document.f1.cid.value; 
      if(firstName.length>20) 
      { 
       document.getElementById("fin").innerHTML="can't exceed 20 characters!"; 
      } 
      if(fatherName.length>20) 
      { 
       document.getElementById("fn").innerHTML="can't exceed 20 characters!"; 
      } 
     } 
     </script> 
</head>

Соответствующие текстовые поля:

<form name="f1" onsubmit="validate()"> 
    Name : <input type="text" name="firname"> <span id="fin" style="color:red"></span> <br> 
    Father's Name: <input type="text" name="fname"> <span id="fn" style="color:red"></span><br> 
</form>

источник

2014-01-19 Ahmed

return false от функции, если проверка не завершена? –

@NeilThompson, что тогда произойдет? я просто хочу, чтобы мое сообщение об ошибке оставалось там, если проверка не удалась, она исчезает – Ahmed

, где ваша подача огня? возможно, он обновляет страницу и, как результат, все сбрасывается. –

Попробуйте это: (@ NeilThompson упомянул в комментариях):

<form name="f1" onsubmit="return validate();"> //put return

А также положить возвращение в ваш javascript-код:

<head> 
    <script type="text/javascript"> 
    function validate() 
    { 
     var flag = true; 
     var firstName=document.f1.firname.value; 
     var fatherName=document.f1.fname.value; 
     var address=document.f1.add.value; 
     var phoneNumber=document.f1.ph.value; 
     var cnic=document.f1.cnic.value; 
     var email=document.f1.email.value; 
     var cgpa=document.f1.fname.value; 
     var sem=document.f1.sem.value; 
     var id=document.f1.cid.value; 
     if(firstName.length>20) 
     { 
      document.getElementById("fin").innerHTML="can't exceed 20 characters!"; 
      flag = false; 
     } 
     if(fatherName.length>20) 
     { 
      document.getElementById("fn").innerHTML="can't exceed 20 characters!"; 
      flag = false; 
     } 
     return flag; 
    } 
    </script> 
</head>

источник

2014-01-19 12:00:25 Bhushan

Что делать, если я хочу, чтобы оба сообщения об ошибках появлялись одновременно? – Ahmed

@Ahmed Пожалуйста, смотрите, я обновил код, который позволит вам показывать оба сообщения одновременно, возвращая флаг в конце функции. – Bhushan

очень хорошо сделано. Спасибо – Ahmed

Нажатие кнопки «Отправить» сбрасывает значения всех полей (Java Script)

ответ

Смежные вопросы