This is the just-validate library codes to validate my form, but it fails to submit the form after validation, it should submit after validating all the fields. I have tried to run these code but it does not run. These are the codes i’ve used. all field are verified. But it fails to submit the form
<!-- language: lang-js --> <script> const validation = new window.JustValidate('#appform', { errorFieldCssClass: 'is-invalid', errorLabelStyle: { fontSize: '16px', color: '#dc3545', }, successFieldCssClass: 'is-valid', successLabelStyle: { fontSize: '16px', color: '#20b418', }, focusInvalidField: true, lockForm: true, }); validation .addField('#fname', [ { rule: 'required', errorMessage: 'First name is required', },{ rule: 'minLength', value: 3, }, ]) .addField('#sname', [ { rule: 'required', errorMessage: 'Second name is required', },{ rule: 'minLength', value: 3, }, ]) .addField('#email', [ { rule: 'required', errorMessage: 'Email is required', }, { rule: 'email', errorMessage: 'Enter a valid email', } ]) .onSuccess((event) => { document.getElementById("app-form").submit(); }); </script> This in the CSS of my Code <!-- language: lang-css --> .form-group { padding-right: 50px; margin:20px;} .form-control { display: block; width: 100%; padding: 0.375rem 0.75rem; font-size: 1rem; line-height: 1.5; color: #495057; background-color: #fff; background-clip: padding-box; border: 1px solid #ced4da; border-radius: 0.25rem; } .btn { display: inline-block; font-weight: 400; text-align: center; white-space: nowrap; vertical-align: middle; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; border: 1px solid transparent; padding: 0.375rem 0.75rem; font-size: 1rem; line-height: 1.5; border-radius: 0.25rem;} .btn-primary { color: #212529; background-color: #78d5ef; border-color: #78d5ef; } <!-- language: lang-html --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Form Validation</title> <script src="https://unpkg.com/just-validate@latest/dist/just-validate.production.min.js"></script> <head> <body> <form id="appform" name="appform" action="process_form.php" method="post" novalidate > <div class="form-group"> <input type="text" name="fname" id="fname" placeholder="First Name" class="form-control text-capitalize" autocomplete="on" spellcheck="false"> </div> <div class="form-group"> <input type="text" name="sname" id="sname" placeholder="Second Name" class="form-control text-capitalize" autocomplete="on" spellcheck="false"> </div> <div class="form-group"> <input type="text" id="email" name="email" placeholder="jayrous@example.com" class="form-control"> </div> <div class="form-group "> <input type="submit" name="submit" id="submit" class="btn btn-primary " value= "Submit Form"> </div> </body> <!-- end snippet -->
Advertisement
Answer
The id of your form is “appform”:
<form id="appform" ...
but your JavaScript code is trying to get the element with an id of “app-form”, which is a totally different id:
document.getElementById("app-form").submit();
try changing them to match, e.g.
document.getElementById("appform").submit();