Показать сообщение вместо предупреждения

Question

Я использую this удивительные JavaScript, чтобы проверить, все мои поля заполнены, но вместо предупреждения коробки Я хочу, чтобы показать сообщение на моей странице вместо

$(document).ready(function() { 
$('form').submit(function() { 
    var incomplete = $('form :input').filter(function() { 
         return $(this).val() == ''; 
        }); 
    //if incomplete contains any elements, the form has not been filled 
    if(incomplete.length) { 
     alert('Vul alle velden in en probeer het nog eens'); 
     //to prevent submission of the form 
     return false; 
    } 
}); 
}); 

Я пытался играть с эхо-сообщениями, но это не сработало

Answer 1

Вы можете оформить собственное всплывающее окно. Или используйте некоторые плагины.

http://jquerybyexample.blogspot.com/2013/01/jquery-popup-window-tutorial-plugins.html

Или вы можете создать какой-то элемент на странице, которая будет показ сообщений об ошибках. Напишите несколько стилей и сделайте их потрясающими!

<div class="error-messages" style="display:none;"></div> 

После отправки формы и проверки ошибок напишите это.

$(".error-messages").text("Some error").fadeIn(); 

Или вы можете сделать его пустым и скрыть его через несколько секунд или после фокуса пользователя.

$(".error-messages").empty().fadeOut(); 

Answer 2

Вы должны работать с DOM, например что-то в этом розе:

$('#errorDiv').append("Error on element" + elementName); 

где предопределяется ошибка Div ('#errorDiv').

Answer 3

Вы можете вставить скрытый DIV выше вашей формы, и показать его вместо предупреждения

<div class="form-errors"></div> 

$(".form-errors").text("The form is not complete").show(); 

Answer 4

Добавить скрытые DIV выровненные с элементами и показать сообщение о скрытых Див, вместо того чтобы окно предупреждения.

Answer 5

Как уже упоминалось в других ответах, вы должны работать с DOM. Однако, если у вас есть время, я бы посоветовал вам посоветовать вам не просто скопировать/вставить строку jquery, а посмотреть, что такое DOM на самом деле, и как манипулировать им в чистом javascript. Вот отправная точка:

https://developer.mozilla.org/en/docs/DOM

Answer 6

<form action="" method="post"> 
<header> 
<h2>My Form</h2> 
<p>This is my form. Fill it out</p> 
</header> 

<!-- To make a responsive form each element of the form should be in a separate div.!--> 
<div id="responsive"> 

    <div> 
    <label for="name"> Enter your information below </label> 
      <div><Input type="text" name="name" required placeholder="Sajid Mehmood"   width="100px;" autofocus></div> 
     </div> 


    </div> 
    !--> 




    <div> 
    <div> 
    <Input type="submit" value="Click me" onclick="msg()" > 
    </div> 
    </div> 

    </div> 
    </form> 

Answer 7

Вот код, я использую для формы, может быть, это может помочь.

<script type="text/javascript"> 
     $('document').ready(function(){ 

     $('#form').validate({ 
      ignore: ".ignore", 
       rules:{ 
        "name":{ 
         required:true, 
         maxlength:40 
        }, 

        "phone":{ 
         required:true,        
        }, 

        "email":{ 
         required:true, 
         email:true, 
         maxlength:100 
        }, 

        hiddenRecaptcha: { 
         required: function() { 
          if (grecaptcha.getResponse() == '') { 
           return true; 
          } else { 
           return false; 
          }}}, 

        "message":{ 
         required:true 
        }}, 

       messages:{ 
        "name":{ 
         required:"Please tell us your name" 
        }, 
        "phone":{ 
         required:"Please tell us your phone number" 
        }, 

        "email":{ 
         required:"How can we send you information? We promise, we will never give away your email!", 
         email:"Please enter a valid email address" 
        }, 

        "hiddenRecaptcha":{ 
         required:"Please check the box to show us you are human" 
        }, 

        "message":{ 
         required:"Please tell us what we can tell you about this vessel" 
        }}, 

       submitHandler: function(form){ 
        $(form).ajaxSubmit({ 
    target: '#preview', 
    success: function() { 
    $('#formbox').slideUp('fast'); 
    } 
});  
       } 
     })   
    }); 
    </script> 


<div id="preview"></div> 
     <div id="formbox"> 
     <div>  
     <p class="contactform">Contact Form:</p> 
      <form name="form" id="form" action="http://www.yourdomaingoeshere.com/submit.php" method="post"> 
      <div class="g-recaptcha" data-sitekey="your site key goes here" style="padding-bottom: 20px!important;"></div> 
        <input type="hidden" class="hiddenRecaptcha required" name="hiddenRecaptcha" id="hiddenRecaptcha"> 
       <ul id="ngothastyle3" class="mylist">      
        <li class="mylist">       
         <input type="text" placeholder="your name" name="name" class="" /> 
        </li> 
        <li class="mylist"> 
         <input type="text" placeholder="phone number" name="phone" class="" /> 
        </li> 
        <li class="mylist">       
         <input type="text" placeholder="email" name="email" class="" /> 
        </li> 
        <li class="mylist">       
         <textarea name="message" placeholder="comments" rows="5" cols="45" class=""></textarea> 
        </li> 

     </div> 


     <div style="float: right;"> 
        <li class="mylist" style="list-style: none;">       
         <input type="submit" value="Send"/> 
        </li> 
     </div>    
       </ul> 
      </form>