I am trying to do a form validation function with Ajax submission. For some reason the validation doesn’t work and when it submits, my server gets the empty fields (when I am testing for the validation) but it shows that it tried to post to the same page… I don’t know why.
Form:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous"> <form id='form' novalidate method="post" class='m-2 p-1'> <div class='row'> <div class='col p-1'> <div class="form-floating mb-3"> <input required type="text" name='First Name' class="form-control" id="fname" placeholder="First Name"> <label for="fname">First Name<span class='red' aria-label='required'> *</span></label> </div> </div> <div class='col p-1'> <div class="form-floating mb-3"> <input required type="text" name='Last Name' class="form-control" id="lname" placeholder="Last Name"> <label for="lname">Last Name</label> </div> </div> </div> <div class='row'> <div class='col p-1'> <div class="form-floating mb-3"> <input required type="email" name='Email' class="form-control" id="email" placeholder="Email"> <label for="lname">Email <span class='red' aria-label='required'> *</span></label> </div> </div> <div class='col p-1'> <div class="form-floating mb-3"> <select required name='Reason For Contacting' class="form-control" id="reason" placeholder="Reason For Contacting"> <option value='Feedback' selected>Feedback</option> <option value='other'>Other</option> </select> <label for="why">Reason For Contacting<span class='red' aria-label='required'> *</span></label> </div> </div> </div> <div class='row'> <div class='col p-1'> <div class="form-floating mb-3"> <textarea required name='Comments' class="form-control" id="comment" placeholder="Your Comments"></textarea> <label for="comment">Your Comments<span class='red' aria-label='required'> *</span></label> </div> </div> </div> <div class='row'> <div class='col p-1'> <button class='form-control btn btn-outline-primary' id='submit'>Send</button> </div> </div> </form>
My JS File:
$(document).ready(() => { autosize($('textarea')) $('#submit').click((e) => { if (validate() == true) { sendForm(); } else { error(validate()) } }) }) var errors; window.onerror = function(msg, url, linenumber) { alert('Error message: ' + msg + 'nURL: ' + url + 'nLine Number: ' + linenumber); return true; } function validate() { elements = $(':input') elements.each((element) => { element = $(element).get() if (element.value === '' || !email(element)) { errors += element.name + " is invalid." } else { return; } }) if (errors) { return errors } else true; } function sendForm() { name = $('input[name="First Name"]').val().trim() + " " + $('input[name="Last Name"]').val().trim() email = $('input[name="Email"]').val().trim() why = $("select").val().trim() comments = $('textarea').val().trim() data = { "name": name, "email": email, "reason": why, "text": comments } $.ajax({ type: 'POST', url: 'https://admin.bekesbikes.tk/contact', crossDomain: true, data: data, dataType: 'json', success: (responseData, textStatus, errorThrown) => { new Notify({ title: 'Submitted!', text: 'Your feedback has been recorded!nnWe will get back to your email shortly!nnHope to see you soon!', effect: 'slide', status: 'success', speed: 1000, autoclose: true }) $(':input').val(''); $('select').val('Feedback') }, error: (responseData, textStatus, errorThrown) => { new Notify({ title: 'Could not submit!', text: 'The form could not be submitted.nnPlease try again or come back later!nnSorry for the inconvenience.', effect: 'slide', customIcon: "<img src='https://www.flaticon.com/svg/vstatic/svg/753/753345.svg?token=exp=1616679486~hmac=4f66bb69b263e9e4d9be5038a16cc41d' width='50px'>", status: 'error', speed: 1000, autoclose: true }) } }); } function error(text) { new Notify({ title: 'Form Fields Are Not Correct', text: text, effect: 'slide', status: 'info', speed: 1000, autoclose: true }) } function send() { if (validate()) { sendForm() } else { error(validate()) } } function email(element) { if (element.type === 'email' && /^[^s@]+@[^s@]+$/.text(element.value)) { return true; } else if (element.type !== 'email') { return true; } else { return false; } }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Where I go when I submit (the form is at this URL):
Any Idea what I should do? I am using node.js
with express.js
.
I added: e.preventDefault()
to my submit event handler but now when I submit the form without filling in anything, I get this notification:
Advertisement
Answer
I changed your click handler:
- default prevention,
- validate() as variable so that it runs only once,
the errors declaration
- empty string instead of undefined,
your validate() function
- excluded button using :not(),
- changed arrow function to ordinary anonymous function,
- used this instead of element, which was only an index,
- added a return to the last else,
and your email() function
- sourced the email validation out to an own function.
I also deleted send(), as it was not used, declared the variables in sendForm() with var and added many semicolons -> maybe in your code one is already missing and you are hoping that the js error correction will add them automatically…
Finally i added the param showIcon to your Notify objects (that was the ‘undefined’ part 😉
$(document).ready(() => { autosize($('textarea')) $('#form').submit((e) => { e.preventDefault(); var validated = validate(); if (validated == true) { sendForm(); } else error(validated); }); var errors = ''; window.onerror = function(msg, url, linenumber) { alert('Error message: ' + msg + 'nURL: ' + url + 'nLine Number: ' + linenumber); return true; } function validate() { elements = $(':input:not(button)'); elements.each(function() { if (this.value === '' || !email(this)) { errors += this.name + " is invalid."; } else return; }); if (errors) { return errors; } else return true; } function sendForm() { var name = $('input[name="First Name"]').val().trim() + " " + $('input[name="Last Name"]').val().trim(); var email = $('input[name="Email"]').val().trim(); var why = $("select").val().trim(); var comments = $('textarea').val().trim(); var data = { "name": name, "email": email, "reason": why, "text": comments }; $.ajax({ type: 'POST', url: 'https://admin.bekesbikes.tk/contact', crossDomain: true, data: data, dataType: 'json', success: (responseData, textStatus, jqXHR) => { new Notify({ title: 'Submitted!', text: 'Your feedback has been recorded!nnWe will get back to your email shortly!nnHope to see you soon!', effect: 'slide', status: 'success', speed: 1000, autoclose: true, showIcon: false }); $(':input').val(''); $('select').val('Feedback'); }, error: (jqXHR, textStatus, errorThrown) => { new Notify({ title: 'Could not submit!', text: 'The form could not be submitted.nnPlease try again or come back later!nnSorry for the inconvenience.', effect: 'slide', customIcon: "<img src='https://www.flaticon.com/svg/vstatic/svg/753/753345.svg?token=exp=1616679486~hmac=4f66bb69b263e9e4d9be5038a16cc41d' width='50px'>", status: 'error', speed: 1000, autoclose: true, showIcon: true }); } }); } function error(text) { new Notify({ title: 'Form Fields Are Not Correct', text: text, effect: 'slide', status: 'info', speed: 1000, autoclose: true, showIcon: false }) } function validateEmail(email) { const re = /^(([^<>()[]\.,;:s@"]+(.[^<>()[]\.,;:s@"]+)*)|(".+"))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2,}))$/; return re.test(email); } function email(element) { if (element.type === 'email' && validateEmail(element.value)) { return true; } else if (element.type !== 'email') { return true; } else return false; } });