Mostrar a mensagem em vez de alerta
estou a usar Este javascript incrível para verificar se todos os meus campos estão preenchidos, mas em vez de uma caixa de alerta, quero mostrar uma mensagem na minha página em vez disso
$(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;
}
});
});
2
7 answers
Podes esticar o teu próprio popup. Ou usar alguns plugins.
Http://jquerybyexample.blogspot.com/2013/01/jquery-popup-window-tutorial-plugins.html
Ou você pode criar algum elemento na página, que irá mostrar as mensagens de erro. Escrever alguns estilos e fazê-lo parecer incrível !
<div class="error-messages" style="display:none;"></div>
Após o envio do formulário, e verificação de erros, escreva isto.
$(".error-messages").text("Some error").fadeIn();
Ou pode esvaziá-lo e escondê-lo, após alguns segundos ou após o foco do utilizador.
$(".error-messages").empty().fadeOut();
4
Author: M1K1O, 2013-08-09 08:26:09
Pode inserir um div escondido por cima do formulário e mostrá-lo em vez do alerta
<div class="form-errors"></div>
$(".form-errors").text("The form is not complete").show();
3
Author: mguimard, 2013-08-09 08:20:30
Tens de trabalhar com o DOM, Por exemplo algo assim:
$('#errorDiv').append("Error on element" + elementName);
Onde tens de predefinar um erro Div ('#errorDiv').
0
Author: user2088127, 2013-08-09 08:20:24
Adicione o div escondido alinhado com os seus elementos e mostre a mensagem no div escondido em vez da caixa de alerta.
0
Author: Abhishek Singh, 2013-08-09 08:23:58
Como mencionado em outras respostas, você tem que trabalhar com o DOM. Se você tiver tempo, no entanto, eu aconselhá-lo-ia a não simplesmente copiar/colar uma linha de jquery, mas para olhar para o que o DOM realmente é e como manipulá-lo em javascript puro. Eis um ponto de partida:
0
Author: Aegis, 2013-08-09 08:28:33
<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>
0
Author: Sajid Mehmood, 2014-07-12 06:04:33
Aqui está o código que uso para um formulário, talvez possa ajudar.
<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>
0
Author: Stephen Kaufman, 2017-07-27 12:51:10