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;
    }
 });
 });

我尝试使用echo消息，但这并没有起作用

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

您可以在表单上方插入隐藏的div，并显示它而不是警告

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

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

Answer 3

您必须使用DOM，例如像这样的东西：

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

你必须预定义一个错误Div（'#errorDiv'）。

Answer 4

添加与元素对齐的隐藏div，并在隐藏的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>

显示消息而不是警报

7 个答案: