我是 JavaScript 的新手。我在一個包含一些文本欄位的 html 檔案中有一個表單。當有人單擊提交按鈕時，會呼叫一個 JavaScript 函式來做一些作業（在這種情況下，一個簡單的警報）。它按我的意愿作業，當我填寫文本欄位并單擊提交按鈕時，它會呼叫 JavaScript 函式，并且該函式會顯示警報。然而，問題是，當用戶單擊提交按鈕時，某些欄位保持空白和/或不遵循電子郵件地址的模式，它會呼叫 JavaScript 函式（即使 HTML 5 已在表單中顯示警告）。我希望 JavaScript 函式應該只在沒有 HTML 警告時才被呼叫，我的意思是沒有空欄位并且用戶必須遵循電子郵件模式。感謝您的幫助。
HTML代碼：
<form id="myForm" method="post" role="form" class="contactForm">
<input type="text" name="name" class="form-control" id="name" placeholder="Your Name" data-rule="minlen:4" data-msg="Please enter at least 4 chars" />
<input type="email" class="form-control" name="email" id="email" placeholder="Your Email" data-rule="email" data-msg="Please enter a valid email" />
<textarea class="form-control" name="message" id="message" rows="5" data-rule="required" data-msg="Please write something" placeholder="Message"></textarea>
<button id="submitFormData" onclick="SubmitFormData();" type="submit" class="button button-a button-big button-rouded">Send Message</button>
</form>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="alert.js"></script>
Javascript 代碼 (alert.js)：
function SubmitFormData() {
var name = $("#name").val();
var email = $("#email").val();
var message = $("#message").val();
alert("SHOW SOMETHING HERE");
}
uj5u.com熱心網友回復：
您只需要將該required屬性添加到您的欄位中，請參閱
uj5u.com熱心網友回復：
您可以在輸入中使用required屬性，還有一件事您可以呼叫 SubmitFormData() onsubmit 表單，這是您修改后的代碼：
<form id="myForm" method="post" role="form" class="contactForm" onsubmit="SubmitFormData();">
<input type="text" name="name" class="form-control" id="name" placeholder="Your Name" data-rule="minlen:4" data-msg="Please enter at least 4 chars" required/>
<input type="email" class="form-control" name="email" id="email" placeholder="Your Email" data-rule="email" data-msg="Please enter a valid email" required/>
<textarea class="form-control" name="message" id="message" rows="5" data-rule="required" data-msg="Please write something" placeholder="Message" required></textarea>
<button id="submitFormData" type="submit" class="button button-a button-big button-rouded">Send Message</button>
</form>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
function SubmitFormData() {
var name = $("#name").val();
var email = $("#email").val();
var message = $("#message").val();
alert("SHOW SOMETHING HERE");
}
</script>
uj5u.com熱心網友回復：
這是使用表單驗證 JS 插件實作的最佳作業解決方案 。
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<style>
form label {
display: inline-block;
width: 100px;
}
form div {
margin-bottom: 10px;
}
.error {
color: red;
margin-left: 5px;
}
label.error {
display: inline;
}
</style>
<script>
$(document).ready(function() {
$('form[id="second_form"]').validate({
rules: {
name: 'required',
user_email: {
required: true,
email: true,
},
message: {
required: true,
}
},
messages: {
name: 'This field is required',
user_email: 'Enter a valid email',
message: 'This field is required'
},
submitHandler: function(form) {
form.submit();
}
});
});
</script>
</head>
<body>
<h2>Example 2:</h2>
<form id="second_form" method="post" action="">
<div>
<label for="name">Name:</label>
<input type="text" name="name" class="form-control" id="name" placeholder="Your Name" data-rule="minlen:4" data-msg="Please enter at least 4 chars" />
</div>
<div>
<label for="email">Email</label>
<input type="email" class="form-control" name="user_email" id="user_email" placeholder="Your Email" data-rule="email" data-msg="Please enter a valid email" />
</div>
<div>
<label for="message">message:</label>
<textarea class="form-control" name="message" id="message" rows="5" data-rule="required" data-msg="Please write something" placeholder="Message"></textarea>
</div>
<div>
<input type="submit" value="Submit" />
</div>
</form>
</body>
</html>uj5u.com熱心網友回復：
最簡單的方法是提供基于表單元素required屬性的純 HTML 解決方案，因為瀏覽器還將通過其元素/控制元件接管所需元素的驗證type......
<form id="myForm" method="post" role="form" class="contactForm" action="https://stackoverflow.com/">
<input
required
type="text" name="name" id="name"
class="form-control" placeholder="Your Name"
/>
<input
required
type="email" name="email" id="email"
class="form-control" placeholder="Your Email"
/>
<textarea
required
name="message" id="message"
class="form-control" rows="5" placeholder="Message"></textarea>
<button
type="submit" id="submitFormData"
class="button button-a button-big button-rouded">Send Message</button>
</form>通用的自定義驗證要復雜得多且勞動密集型...
function validateControValue(elm) {
let isValid = true;
const elmType = elm.type;
if (elmType !== 'button' && elmType !== 'submit') {
const $elm = $(elm);
const isEmpty = ($elm.val().trim() === '');
if (isEmpty) {
$elm.val('');
$elm.addClass('validation-error');
} else {
$elm.removeClass('validation-error');
}
// non empty is valid, empty is invalid.
isValid = !isEmpty;
}
return isValid;
}
function handleValidFormSubmit(/* evt */) {
const isValidSubmitData = Array
.from(this.elements)
.every(validateControValue);
return isValidSubmitData;
}
function main() {
$('#myForm').on('submit', handleValidFormSubmit)
}
$(document)
.ready(main);.validation-error {
border: 1px solid #f00;
}<form id="myForm" method="post" role="form" class="contactForm" action="https://stackoverflow.com/">
<input
type="text" name="name" id="name"
class="form-control" placeholder="Your Name"
/>
<input
type="email" name="email" id="email"
class="form-control" placeholder="Your Email"
/>
<textarea
name="message" id="message"
class="form-control" rows="5" placeholder="Message"></textarea>
<button
type="submit" id="submitFormData"
class="button button-a button-big button-rouded">Send Message</button>
</form>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!-- <script src="alert.js"></script> //-->轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/336945.html
標籤：javascript html 查询