Skip to content

Just-validate form validation library, just fails to submit the form aftervalidtion

Jayrous

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();