我无法使联系表格起作用,因为它返回错误
我正在为用户与公司联系的网页开发联系表,问题是我一旦提交所需字段的信息,它会返回错误警报,仅在这些字段集(输入和TextAarea)时才需要显示,该警报只需要显示留空。
这是HTML:
<form>
<fieldset class="form-group" id="form-group">
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</fieldset>
<fieldset class="form-group" id="form-group2">
<textarea type="message" class="form-control" id="exampleMessage" placeholder="Message"></textarea>
</fieldset>
<!--Avoid redirect to another page (or will not reload).-->
<form onsubmit="return false">
</form>
<br>
<form action="?" method="POST">
<div class="g-recaptcha" class="recaptcha_footer" style="padding-left: 20px !important;" data-sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI" data-secretkey="6LeIxAcTAAAAAGG-vFI1TnRWxMZNFuojJ4WifJWe" data-callback="recaptcha_callback" data-theme="dark"></div>
<br/>
<!--input type="submit" value="Submit"-->
</form>
<br>
<fieldset class="form-group text-xs-right">
<button onclick="sendContact();" type="submit" id="submit" disabled>Send</button>
</fieldset>
这是JavaScript:
<script>
function getDataInput() {
return document.querySelector('input[id="exampleInputEmail1"]:checked', 'textarea[id="exampleMessage"]:checked')
}
//Group fields into an object
var fieldset = {};
document.addEventListener("DOMContentLoaded", function() {
fieldset.exampleInputEmail1 = document.getElementById('#exampleInputEmail1');
fieldset.exampleMessage = document.getElementById('#exampleMessage');
})
//Checking that the field is not empty
function isNotEmpty(value) {
if (value == null || typeof value == 'undefined' ) return false;
return (value.length > 0);
}
//Check if a string is an email
function isEmail(email) {
let regex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;
return regex.test(String(email).toLowerCase());
}
//Prepare all validation functions
function fieldValidation(fieldset, validationFunction) {
if (fieldset == null) return false;
let isFieldValid = validationFunction(fieldset.value)
if (!isFieldValid) {
fieldset.className = 'placeholderRed';
} else {
fieldset.className = '';
}
return isFieldValid;
}
//isValid: central function for checking the validity of our contact form
function isValid() {
var valid = true;
valid &= fieldValidation(fieldset.exampleInputEmail1, isNotEmpty);
valid &= fieldValidation(fieldset.exampleMessage, isNotEmpty);
return valid;
}
//User class constructor: Combine multiple values under the same roof
class User {
constructor(exampleInputEmail1, exampleMessage) {
this.exampleInputEmail1 = exampleInputEmail1;
this.exampleMessage = exampleMessage;
}
}
//Sending the contact form data
function sendContact() {
fieldset.exampleInputEmail1, fieldset.exampleMessage = getDataInput();
if (isValid()) {
let usr = new User(exampleInputEmail1.value, exampleMessage.value);
alert('Thanks for submiting, we will be in touch shortly.')
} else {
alert("There was an error")
}
}
</script>
I am developing a Contact Form for a web page for users to contact the company, the problem is the once I submit the information of the required fieldsets it returns an error alert that only needs to display if these fieldsets (an input and a textarea) are left empty.
Here is the HTML:
<form>
<fieldset class="form-group" id="form-group">
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</fieldset>
<fieldset class="form-group" id="form-group2">
<textarea type="message" class="form-control" id="exampleMessage" placeholder="Message"></textarea>
</fieldset>
<!--Avoid redirect to another page (or will not reload).-->
<form onsubmit="return false">
</form>
<br>
<form action="?" method="POST">
<div class="g-recaptcha" class="recaptcha_footer" style="padding-left: 20px !important;" data-sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI" data-secretkey="6LeIxAcTAAAAAGG-vFI1TnRWxMZNFuojJ4WifJWe" data-callback="recaptcha_callback" data-theme="dark"></div>
<br/>
<!--input type="submit" value="Submit"-->
</form>
<br>
<fieldset class="form-group text-xs-right">
<button onclick="sendContact();" type="submit" id="submit" disabled>Send</button>
</fieldset>
Here is the Javascript:
<script>
function getDataInput() {
return document.querySelector('input[id="exampleInputEmail1"]:checked', 'textarea[id="exampleMessage"]:checked')
}
//Group fields into an object
var fieldset = {};
document.addEventListener("DOMContentLoaded", function() {
fieldset.exampleInputEmail1 = document.getElementById('#exampleInputEmail1');
fieldset.exampleMessage = document.getElementById('#exampleMessage');
})
//Checking that the field is not empty
function isNotEmpty(value) {
if (value == null || typeof value == 'undefined' ) return false;
return (value.length > 0);
}
//Check if a string is an email
function isEmail(email) {
let regex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;
return regex.test(String(email).toLowerCase());
}
//Prepare all validation functions
function fieldValidation(fieldset, validationFunction) {
if (fieldset == null) return false;
let isFieldValid = validationFunction(fieldset.value)
if (!isFieldValid) {
fieldset.className = 'placeholderRed';
} else {
fieldset.className = '';
}
return isFieldValid;
}
//isValid: central function for checking the validity of our contact form
function isValid() {
var valid = true;
valid &= fieldValidation(fieldset.exampleInputEmail1, isNotEmpty);
valid &= fieldValidation(fieldset.exampleMessage, isNotEmpty);
return valid;
}
//User class constructor: Combine multiple values under the same roof
class User {
constructor(exampleInputEmail1, exampleMessage) {
this.exampleInputEmail1 = exampleInputEmail1;
this.exampleMessage = exampleMessage;
}
}
//Sending the contact form data
function sendContact() {
fieldset.exampleInputEmail1, fieldset.exampleMessage = getDataInput();
if (isValid()) {
let usr = new User(exampleInputEmail1.value, exampleMessage.value);
alert('Thanks for submiting, we will be in touch shortly.')
} else {
alert("There was an error")
}
}
</script>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论