![](/img/trans.png)
[英]Javascript: How to disable submit button until all fields are validated?
[英]Javascript - Disable submit button until 3 fields are not empty
我有這個幾乎工作的位: http : //jsfiddle.net/HFzkW/我的代碼看起來像這樣:
<div id="cform-container">
<div class="alignleft" id="cform">
<form action="<?php print site_url('/sent'); ?>" method="POST" >
<input type="hidden" name="Contact-Form" value="contact-form" />
<div class="cform-row">
<div class="alignleft cform-label"><label for="yn">Your Name</label><span id="star5">*</span></div>
<div class="alignright cform-ti"><input type="text" name="yn" id="yn" /><br /><span id="namespan" value="0"></span></div>
<div class="clearboth"></div>
</div>
<div class="cform-row">
<div class="alignleft cform-label"><label for="cn">Company Name</label></div>
<div class="alignright cform-ti"><input type="text" name="cn" id="cn" /></div>
<div class="clearboth"></div>
</div>
<div class="cform-row">
<div class="alignleft cform-label"><label for="em">Email Address</label><span id="star5">*</span></div>
<div class="alignright cform-ti"><input type="text" name="em" id="em" /><br /><span id="emailspan" value="0"></span></div>
<div class="clearboth"></div>
</div>
<div class="cform-row">
<div class="alignleft cform-label"><label for="ph">Phone Number</label><span id="star5">*</span></div>
<div class="alignright cform-ti"><input type="text" name="ph" id="ph" /><br /><span id="phonespan" value="0"></span></div>
<div class="clearboth"></div>
</div>
<div class="cform-row">
<div class="alignleft cform-label"><label for="ct">Industry</label></div>
<div class="alignright cform-ti"><input type="text" name="ct" id="ct" /></div>
<div class="clearboth"></div>
</div>
<div class="cform-row">
<div class="alignleft cform-label"><label for="msg">Message</label></div>
<div class="alignright cform-ti"><textarea name="msg" id="msg"></textarea></div>
<div class="clearboth"></div>
</div>
<div id="cform-btn"><input type="submit" value="Submit" /></div>
</form>
</div>
<script id="source" language="javascript" type="text/javascript">
$(function(){
$("input[type=submit]").attr("disabled", "disabled");
$("#em").blur(function()
{
var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
var emailaddress = $("#em").val();
if(!emailReg.test(emailaddress) | emailaddress=="") {
$("#emailspan").html('<font color="#cc0000">Please enter valid Email address</font>');
}else{
$("#emailspan").html('<font color="#cc0000"></font>');
}
});
$("#yn").blur(function()
{
var namefield = $("#yn").val();
if(namefield=="") {
$("#namespan").html('<font color="#cc0000">Please enter your name</font>');
}else{
$("#namespan").html('<font color="#cc0000"></font>');
}
});
$("#ph").blur(function()
{
var phonefield = $("#ph").val();
if(phonefield=="") {
$("#phonespan").html('<font color="#cc0000">Please enter your name</font>');
}else{
$("#phonespan").html('<font color="#cc0000"></font>');
}
});
$('input, textarea').change(function(){
var validation;
var email = $("#em").val();
var name = $("#yn").val();
var phone = $("#ph").val();
if ( email == "" && name == "" && phone == "" ) {
validation = false;
} else if ( email != "" && name != "" && phone != "" ) {
alert ("variables"+email+name+phone);
validation = true;
}
if (validation = true) {
$("input[type=submit]").removeAttr("disabled");
} else {
$("input[type=submit]").attr("disabled", "disabled");
}
});
});
但是,我不能讓它完全運作。 當用戶輸入其中一個字段(例如您的姓名)時,不再禁用“提交”按鈕。
我希望禁用“提交”按鈕,直到滿足所有3個“必需”字段。 我認為代碼很清楚 - 但它仍然無法正常工作。
此外,它在JSFiddle中工作,但不是在我試圖讓它工作的Wordpress網站上工作。 任何檢查的想法也將受到贊賞。
嘗試切換到ors。 小心你的邏輯並試着大聲說出它是否有意義:
電子郵件為空白且名稱為空白且電話為空,則驗證為空。 你真正想要的是說如果任何字段是空白的,驗證是錯誤的。
if ( email == "" || name == "" || phone == "" ) {
validation = false;
} else if ( email != "" && name != "" && phone != "" ) {
alert ("variables"+email+name+phone);
validation = true;
}
此外,您在if語句中設置validation=true
。 這將永遠返回true。 更改為: if (validation == true) {
從我所看到的,我要做的第一件事就是調試這個(代碼有點令人困惑,所以而不是復制它,我會給你一些指導)。
代替
if(validation = true )
嘗試
if(validation)
這是因為沒有任何參數,它將檢查不是false,undefined或null。 電子郵件名稱和電話可能也是如此。
所以基本上:
<form id="myForm" onfocus="submitButton("myForm);">
<input type="text" name="name" placeholder="Name">
<input type="text" name="email" placeholder="Email">
<input type="text" name="phone" placeholder="Phone">
</form>
和
function submitButton(formID){
var formObject = document.getElementById(formID);
var name = formObject.name.value;
var email = formObject.email.value;
var phone = formObject.phone.value;
if (name && email && phone) {
showSubmitButton();
} else {
//keep the button hidden
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.