Блог

Ниже приведен мой код HTML, в нем он проверяет только первые два поля, т. Е. Имя ребенка и номер мобильного телефона, только путем появления предупреждающего сообщения в окне, когда я нажимаю на кнопку отправки, но не знаю, почему он не проверяет поля ниже, и выдает сообщение об ошибке при отправке записи в базу данных, потому что изображение и т.д. поля равны нулю. Я много пробовал, но не смог найти ошибку.

 <script> 
function BabyContest()                                    
{ 
    var baby_name = document.forms["RegForm"]["baby_name"];               
    var mob_no = document.forms["RegForm"]["mob_no"];    
    var guardian_email = document.forms["RegForm"]["guardian_email"];  
    var dob =  document.forms["RegForm"]["dob"];  
    var lines_for_baby = document.forms["RegForm"]["lines_for_baby"];  
    var image_file =  document.forms["RegForm"]["image_file"];  
     
   
    if (baby_name.value == "")                                  
    { 
        window.alert("Please enter your baby's name."); 
        baby_name.focus(); 
        return false; 
    } 
   
 
    if (mob_no.value.match(/^(?([6-9]{1}))?([0-9]{9})$/))
        {
      return true;
        }
      else
        {
        alert("Please enter a Valid 10 digit Mobile Number");
        mob_no.focus();
        return false;
        }
           
    if (guardian_email.value == "")                                   
    { 
        window.alert("Please enter a email address."); 
        guardian_email.focus(); 
        return false; 
        }
        else
        {
          if (guardian_email.value != "")
          {
            if (guardian_email.value.match(/^[a-zA-Z0-9.!#$%amp;'* /=?^_`{|}~-] @[a-zA-Z0-9-] (?:.[a-zA-Z0-9-] )*$/))
            {
          return true;
            }
          else
            {
            alert("Please enter a Valid Email Address");
            guardian_email.focus()
            return false;
            }
          }
        }

   
    if (dob.value == "")                           
    { 
        window.alert("Please enter baby's date of birth."); 
        dob.focus(); 
        return false; 
    } 
   
    if (lines_for_baby.value == "")                        
    { 
        window.alert("Please write some lines for baby"); 
        lines_for_baby.focus(); 
        return false; 
    } 

    if (image_file.value == "")                        
    { 
        window.alert("Please input Image file"); 
        image_file.focus(); 
        return false; 
    } 
   
    return true; 
}
</script> 
  

 <form action="/upload" method="post" enctype="multipart/form-data" name="RegForm" onsubmit="return BabyContest()">
      <p class="title-font sm:text-xl text-xl mb-4 font-small text-blue-600"><b>Enter Baby's Name</b></p>
      <div class="flex w-full md:justify-start justify-center">
        <input class="bg-gray-100 rounded mr-4 border border-gray-400 focus:outline-none focus:border-indigo-500 text-base px-4 lg:w-full xl:w-1/2 w-2/4" placeholder="Enter Contestant's Name" type="text" name="baby_name" >        
      </div>
      <p class="title-font sm:text-xl text-xl mb-4 font-small text-blue-600"><b> Guardian's Mobile No:</b></p>
      <div class="flex w-full md:justify-start justify-center">
        <input class="bg-gray-100 rounded mr-4 border border-gray-400 focus:outline-none focus:border-indigo-500 text-base px-4 lg:w-full xl:w-1/2 w-2/4" placeholder="Enter 10 digit Mobile No." type="tel" name="mob_no" >        
      </div>
      <p class="title-font sm:text-xl text-xl mb-4 font-small text-blue-600"><b>Enter Guardian' email</b></p>
      <div class="flex w-full md:justify-start justify-center">
        <input class="bg-gray-100 rounded mr-4 border border-gray-400 focus:outline-none focus:border-indigo-500 text-base px-4 lg:w-full xl:w-1/2 w-2/4" placeholder="Enter valid Email address" type="email" name="guardian_email" >        
      </div>
      <p class="text-sm mt-2 text-gray-500 mb-8 w-full">Please enter a valid email address as further communicaiton will be done this email</p>
      <p class="title-font sm:text-xl text-xl mb-4 font-small text-blue-600"><b>Date Of Birth Of Your Baby</b></p>
      <div class="flex w-full md:justify-start justify-center">
        <input class="bg-gray-100 rounded mr-4 border border-gray-400 focus:outline-none focus:border-indigo-500 text-base px-4 lg:w-full xl:w-1/2 w-2/4" placeholder="mm/dd/yyyy" type="date" name="dob" >  
     
      </div>
      <p class="title-font sm:text-xl text-xl mb-4 font-small text-blue-600"><b>Some Pleasurable Lines For Baby</b></p>
      <div class="flex w-full md:justify-start justify-center">
        <textarea class="bg-gray-100 rounded mr-4 border border-gray-400 h-48 focus:outline-none focus:border-indigo-500 text-base px-4 lg:w-full xl:w-1/2 w-2/4" placeholder="Write some Pleasurable Lines For Baby" type="text" name="lines_for_baby" ></textarea>     
      </div>
      
      <p class="title-font sm:text-xl text-xl mb-4 font-small text-blue-600"><b>Please Upload Image Of Baby</b></p>
      <div class = "row">

            <input type="file" name="image_file"  >
            <button type="submit" class="inline-flex text-white bg-indigo-500 border-0 py-2 px-6 focus:outline-none hover:bg-indigo-600 rounded text-lg" >Submit </button>
          </div> 
</form>

  

Проверка номера мобильного телефона return true заключена в if инструкции, которая приводит к короткому замыканию остальной части функции. У вас должно быть только одно return true в конце функции после того, как каждая проверка прошла успешно, т. Е. Не была применена return false .

Например, вы могли бы рассмотреть возможность изменения строки проверки номера мобильного телефона на

if (!mob_no.value.match(/^(?([6-9]{1}))?([0-9]{9})$/))

и полностью удалите return true раздел этого if заявления.

Другой способ добиться этого в целом — иметь переменную var ret = true и устанавливать эту переменную при каждой проверке соответствующим образом, а затем return ret в конце. Этот подход будет иметь побочный эффект, заключающийся в том, что конечный пользователь (возможно) получит несколько предупреждений, поэтому механизм return false при первом сбое более подходит для этого приложения.