проверка формы не работает по назначению

Question

У меня есть форма с несколькими полями и кнопка отправки на веб-странице. Если поля пустые, когда нажата кнопка отправки, небольшое небольшое сообщение должно появиться ниже каждого поля, оставленного пустым, чтобы запросить пользователя заполнить соответствующее поле. Однако, когда я нажимаю кнопку с, скажем, каждое пустое поле, я вижу сообщение, отображаемое только на долю секунды, после чего отображается верхняя часть веб-страницы, частью которой является эта форма.

HTML

<div class = "contacts"> 
     <div class = "container-fluid"> 
      <center><text><b>Contact Me!</b></text></center> 
      <center><form role="form"> 
       <div class = "form-group"> 
        <label for="inputname"></label> 
        <input type ="text" class = "form-control" id = "inputname" placeholder = "Name" > 
        <span></span> 
       </div> 


       <div class = "form-group"> 
        <label for="inputemail"></label> 
        <input type ="email" class = "form-control" id = "inputemail" placeholder = "Email Address" > 
        <span></span> 
       </div> 


       <div class = "form-group"> 
        <label for="inputphone"></label> 
        <input type ="number" class = "form-control" id = "inputphone" placeholder = "Phone Number" > 
        <span></span> 
       </div> 


       <div class = "form-group"> 
        <label for="inputmessage"></label> 
        <textarea type ="text" class = "form-control" id = "inputmessage" rows = "5" placeholder = "Message" ></textarea> 
        <span></span> 
       </div> 

      <div class = "form-group"> 
       <center><button type="submit">SEND</button></center> 
      </div> 
     </form></center> 
    </div> 
</div> 

Jquery scipt

$(".contacts button").click (function() { 
        $("form").submit (function() { 
         if ($ ("#inputname").val() === "") { 
          $("span").text("*Enter your name please!").show(); 

         } 

         if ($ ("#inputmail").val() === "") { 
          $("span").text("*Enter your email id please!").show(); 

         } 

         if ($ ("#inputphone").val() === "") { 
          $("span").text("*Enter your phone number please!").show(); 

         } 

         if ($ ("#inputmessage").val() === "") { 
          $("span").text("*Enter your message please!").show(); 

         } 

        }); 
       }); 

, что я должен изменить/добавить код, чтобы сделать его работу и держать messsge отображается?

Заранее благодарен!

Answer 1

Я думаю, что проблема заключается в том, что представление страницы вызывает перезагрузку страницы.

Вам необходимо предотвратить отправку формы по умолчанию, если значения недействительны.

Также нет необходимости иметь щелчок и отправить обработчику

$("form").submit(function() { 
 
    var valid = true, 
 
    fields = { 
 
     inputname: '*Enter your name please!', 
 
     inputemail: '*Enter your email id please!', 
 
     inputphone: '*Enter your phone number please!', 
 
     inputmessage: '*Enter your inputmessage please!', 
 
    }; 
 

 
    $.each(fields, function(key, value) { 
 
    var $field = $('#' + key), 
 
     blank = $.trim($field.val()) === '', 
 
     $span = $field.next('span'); 
 
    if (blank) { 
 
     $span.text(value).show() 
 
    } else { 
 
     $span.hide(); 
 
    } 
 
    }) 
 

 
    return valid; 
 
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="contacts"> 
 
    <div class="container-fluid"> 
 
    <center> 
 
     <text><b>Contact Me!</b> 
 
     </text> 
 
    </center> 
 
    <center> 
 
     <form role="form"> 
 
     <div class="form-group"> 
 
      <label for="inputname"></label> 
 
      <input type="text" class="form-control" id="inputname" placeholder="Name"> 
 
      <span></span> 
 
     </div> 
 

 

 
     <div class="form-group"> 
 
      <label for="inputemail"></label> 
 
      <input type="email" class="form-control" id="inputemail" placeholder="Email Address"> 
 
      <span></span> 
 
     </div> 
 

 

 
     <div class="form-group"> 
 
      <label for="inputphone"></label> 
 
      <input type="number" class="form-control" id="inputphone" placeholder="Phone Number"> 
 
      <span></span> 
 
     </div> 
 

 

 
     <div class="form-group"> 
 
      <label for="inputmessage"></label> 
 
      <textarea type="text" class="form-control" id="inputmessage" rows="5" placeholder="Message"></textarea> 
 
      <span></span> 
 
     </div> 
 

 
     <div class="form-group"> 
 
      <center> 
 
      <button type="submit">SEND</button> 
 
      </center> 
 
     </div> 
 
     </form> 
 
    </center> 
 
    </div> 
 
</div>