在提交之前验证消息

时间:2015-01-23 18:18:33

标签: javascript jquery html validation

我正在制作一个html5应用程序,要求在点击提交按钮之前填写所有字段。
我现在要做的是在没有填写文本框的情况下发出警报,问题是我的提交按钮被禁用,直到所有字段都被填入,所以我无法真正为该按钮添加警报。
有什么想法如何解决这个问题? 我想要它,以便在填写最终文本框后,提交按钮变为可用,而无需先点击它 请注意,“必需”不起作用。

我有以下代码:

HTML:

<form id="winForm">
<p>
<input type="text" id="name" name="name" required />
</p>
<p>
<input type="text" id="vorname" name="vorname" required />
</p>
<p>
<input type="text" id="email1" name="email1"  required />
<label id="atteken" >@</label>
<input type="text" id="email2" name="email2 "  required />
<textarea  id="fullemail" name="fullemail"></textarea>
</p>
<p>
<input type="text" id="telefon" name="telefon" onclick="generateFullAdress()"  required />
</p>
<p>
<input type="text" id="firma" name="firma"  required />
</p>
<p>
      <input type="submit" id="submitBtn" onclick="sendTheMail()" value=" ">
</button><div id="loading"><img src="images/loadingBar.gif" id="load"></img></div>

</p>
</form>

的Jquery / JS

<script type="text/javascript">
function generateFullAdress() {

document.getElementById('fullemail').value = 
document.getElementById('email1').value + '@' + 
document.getElementById('email2').value;

}

</script>

<script>

var $input = $('input:text'),
    $register = $('#submitBtn');    
$register.attr('disabled', true);

$input.keyup(function() {
    var trigger = false;
    $input.each(function() {
        if (!$(this).val()) {
            trigger = true;
        }
    });

if(trigger) {
    $register.attr('disabled',true);    
}else {

    $register.removeAttr('disabled');  

}
});
</script>

非常感谢帮助。

谢谢!

1 个答案:

答案 0 :(得分:1)

如果您有这样的表格:

<form id="form">
...
</form>

您可以在提交表单之前使用以下jQuery代码执行某些操作:

$(function() {
    $('#form').submit(function() {
        // DO STUFF
        return true; // return false to cancel form action
    });
});

使用onsubmit事件执行相同的操作,例如

<form action="youraction" onsubmit="validatefunction" method="post">