如何在先前(表单验证)成功的情况下调用新的javascript函数

时间:2019-01-17 17:30:03

标签: javascript php html5 forms validation

我有一个由另一位开发人员编写的表单(我不是真正的开发人员,比编码人员更多的设计师)...并且我尝试添加验证,直到表单数据不发送/发送到现场验证成功。

我已经获得了很多想要的东西,但是我坚持让按钮触发验证,然后调用发送数据的函数。

我有点急需,所以任何能真正帮助您的人都将不胜感激!

<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>

我希望表单在必填字段正确填写之前完全不发送/发送电子邮件。最好向用户提供一些要求提交的内容的指示。

0 个答案:

没有答案