根據條件提交表格。 Jquery

Question

我有一個表單和一個提交按鈕。我想在這個提交按鈕上添加一個jQuery的條件。我只想在用戶輸入有效的電子郵件地址時才發佈表單。

HTML代碼：

<form method="post" action="{% url sportdub.views.login %}"> 
    <input type="text" name="email" value="" class="span8"/> 
    <input type="submit"></button> 
</form> 

Javascript代碼：

function isValidEmailAddress(emailAddress) { 
    var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i); 
    return pattern.test(emailAddress); 
}; 

我想要做的是把一個條件對我的提交按鈕：

if(!isValidEmailAddress(emailaddress)) { 
    /* don't submit the form and raise an error */ 
} else { 
    /* submit the form */ 
} 

任何想法如何我可以完成那個？

Answer 1

如果不通過驗證，您需要將onsubmit事件處理程序添加到您的表單中，並且return false。

例如根據您的代碼：

<form method="post" action="{% url sportdub.views.login %}" onsubmit="return validateForm();"> 
    <input type="text" id="formEmail" name="email" value="" class="span8"/> 
    <input type="submit"></button> 
    </form> 

在JS

：

function validateForm() { 
    if(!isValidEmailAddress(document.getElementById('formEmail').value)) { 
     // also before return you can add alert('your e-mail is invalid'); 
     // or display message in form, etc... 
     return false; 
    } else { 
     return true; 
    }  
} 

順便說一句，我不建議使用內聯JS屬性，只需添加到您的所有內容，並形成獨特的id屬性，如果您使用jQuery，則可以在.submit()方法中執行所有驗證。在烏拉圭回合

Answer 2

使用一個電話的onclick提交按鈕與回報 ...您的代碼應該是，

<form method="post" action="{% url sportdub.views.login %}"> 
    <input type="text" id="email" name="email" value="" class="span8"/> 
    <input type="submit" onclick = "return isValidEmailAddress();"></button> 
    </form> 

function isValidEmailAddress() { 
    var emailAddress = $('#email').val(); 
    var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i); 
    return pattern.test(emailAddress); 
    }; 

Answer 3

內聯：

<form method="post" action="{% url sportdub.views.login %}" 
    onsubmit="return isValidEmailAddress(this.email.value)"> 
    <input type="text" name="email" value="" class="span8"/> 
    <input type="submit"></button> 
    </form> 

更好（純JS） - 注意，我需要一個表單ID：

window.onload=function() { 
    document.getElementById("form1").onsubmit=function() { 
    if (!isValidEmailAddress(this.email.value)) { 
     alert('Please enter a valid address'); 
     return false; // cancel submit 
    } 
    return true; // allow submit 
    } 
} 

jQuery版本：

$(function() { 
    $("#form1").on("submit",function(e) { 
    if (!isValidEmailAddress($("#email").val())) { 
     alert('Please enter a valid address'); 
     return false; // cancel submit 
    } 
    return true; // allow submit 
    }); 
}); 

最後兩位假設

<form id="form1" method="post" action="{% url sportdub.views.login %}"> 
    <input type="text" name="email" id="email" value="" class="span8"/> 
    <input type="submit"></button> 
</form>