javascript - 显示消息而不是警报

Question

我正在使用这个惊人的 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;
    }
 });
 });

我试图玩回声消息，但没有奏效。

score 6 · Accepted Answer

您可以设计自己的弹出窗口。或者使用一些插件。

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

score 4 · Accepted Answer

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

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

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

score 0 · Accepted Answer

您必须使用 DOM，例如：

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

您必须在其中预定义一个错误 Div ('#errorDiv')。

score 0 · Accepted Answer

0

添加与您的元素对齐的隐藏 div，并在隐藏 div 而不是警报框上显示消息。

于 2013-08-09T08:23:58.707 回答

score 0 · Accepted Answer

正如其他答案中提到的，您必须使用 DOM。但是，如果您有时间，我建议您不要简单地复制/粘贴一行 jquery，而是要研究 DOM 的实际含义以及如何在纯 javascript 中操作它。这是一个起点：

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

score 0 · Accepted Answer

<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>

score 0 · Accepted Answer

这是我用于表单的代码，也许它可以提供帮助。

<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>

javascript - 显示消息而不是警报

7 回答 7

Related

Reference