javascript 显示消息而不是警报
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18142652/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Show message instead of alert
提问by Erwin van Ekeren
I am using thisamazing javascript to check if all my fields are filled in but instead of a alert box I want to show a message on my page instead
我正在使用这个惊人的 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;
}
});
});
I tried to play with echo messages but that didn't worked
我试图玩回声消息，但没有奏效
回答by M1K1O
You can styling your own popup. Or use some plugins.
您可以设计自己的弹出窗口。或者使用一些插件。
http://jquerybyexample.blogspot.com/2013/01/jquery-popup-window-tutorial-plugins.html
http://jquerybyexample.blogspot.com/2013/01/jquery-popup-window-tutorial-plugins.html
Or you can create some element on the page, that will showing the error messages. Write some styles and make it look awesome !
或者您可以在页面上创建一些元素，这将显示错误消息。写一些样式，让它看起来很棒！
<div class="error-messages" style="display:none;"></div>
After the form sending, and checking errors, write this.
表格发送后，检查错误，写这个。
$(".error-messages").text("Some error").fadeIn();
Or you can make it empty and hide it, after a seconds or after user focus.
或者您可以在几秒钟后或在用户聚焦后将其清空并隐藏。
$(".error-messages").empty().fadeOut();
回答by mguimard
You can insert a hidden div above your form, and show it instead of the alert
您可以在表单上方插入一个隐藏的 div，并显示它而不是警报
<div class="form-errors"></div>
$(".form-errors").text("The form is not complete").show();
回答by Abhishek Singh
Add hidden div aligned with your elements and show the message on hidden div's instead of alert box.
添加与您的元素对齐的隐藏 div，并在隐藏 div 而非警告框上显示消息。
回答by user2088127
You have to work with the DOM, e.g. something like this:
您必须使用 DOM，例如：
$('#errorDiv').append("Error on element" + elementName);
where you have to predefine an error Div ('#errorDiv').
您必须在其中预定义错误 Div ('#errorDiv')。
回答by Aegis
As mentioned in other answers, you have to work with the DOM. If you have the time, however, I would advice you advice you to not simply copy/paste a line of jquery but to look into what the DOM actually is and how to manipulate it in pure javascript. Here's a starting point:
正如其他答案中提到的，您必须使用 DOM。但是，如果您有时间，我建议您不要简单地复制/粘贴一行 jquery，而是查看 DOM 实际是什么以及如何在纯 JavaScript 中操作它。这是一个起点：
回答by Sajid Mehmood
<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>
回答by Stephen Kaufman
Here is the code I use for a form, maybe it can help.
这是我用于表单的代码，也许它可以提供帮助。
<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>
