我有一个由另一位开发人员编写的表单(我不是真正的开发人员,比编码人员更多的设计师)...并且我尝试添加验证,直到表单数据不发送/发送到现场验证成功。
我已经获得了很多想要的东西,但是我坚持让按钮触发验证,然后调用发送数据的函数。
我有点急需,所以任何能真正帮助您的人都将不胜感激!
<div class="contactForm">
<form id="contactForm">
<input type="hidden" name="subject" placeholder="Subject" data-send="true"/>
<input type="text" name="name" placeholder="Name*" data-send="true" required />
<input type="tel" name="phone" placeholder="Phone* (format: xxx-xxx-xxxx)" pattern="^\d{3}-\d{3}-\d{4}$" required />
<input type="email" name="email" placeholder="Email*" data-send="true" required />
<input type="text" name="note" placeholder="Note" data-send="true"/>
<input id="sendForm" type="button" value="Send"
data-template="indextemplate"
data-handle="contactForm"
data-script="system/form_email.php"
data-pending="Your inquiry is being sent..."
data-success="Thank you! We will reach out to you as soon as we can!"/>
<span class="icon_spin"></span>
<span class="message"></span>
</form>
</div>
</div></div>
<script type="text/javascript" src="<?=@$prefix;?>js/email.form.js"></script>
<script>
$('#sendForm').click(function(event) {
const inputs = document.querySelectorAll('input, select, textarea');
for(let input of inputs) {
input.addEventListener('invalid', (event) => {
input.classList.add('error');
}, false);
input.addEventListener('blur', (event) => {
input.checkValidity();
})
}
on success -> { submitForm(); }
}
$('.bullets input[name="contact"]').click(function(){
$('#contactForm input[name="subject"]').val($(this).next().find('.subject').text());
});
function sendForm() {
var edata = {
handle: $('#sendForm').data('handle'),
script: $('#sendForm').data('script'),
success: $('#sendForm').data('success')
};
$('#sendForm').addClass('sending');
$('#message').text($('#sendForm').data('pending'));
var formdata = new FormData();
formdata.append('subject', $('input[name="subject"]').val());
formdata.append('name', $('input[name="name"]').val());
formdata.append('phone', $('input[name="phone"]').val());
formdata.append('email', $('input[name="email"]').val());
formdata.append('note', $('input[name="note"]').val());
formdata.append('template', $('#sendForm').data('template'));
emailForm(formdata, edata);
});
</script>
我希望表单在必填字段正确填写之前完全不发送/发送电子邮件。最好向用户提供一些要求提交的内容的指示。