表单验证成功但表单未提交

Question

I have a simple form where I am using a vanilla JS library ( https://pristine.js.org/ ) for form validation. The form validation is successful (mostly) but then the form doesn't submit. For the life of me I can't figure out what's going wrong.The form is supposed to post to a PHP file where I can get the posted variable values.

My HTML page with the form and necessary JS and CSS are in the jsfiddle here . In case JSFiddle is acting up, the actual code's below.

I'd appreciate it if someone can help me out with this.

Thanks a ton! Dexxterr

PS: I've beginner level knowledge about JS.

My HTML Code:

<div style="width: 50%; margin: auto;">
    <form class="fv-stacked-form" id="inquiry" method="POST" action="form.php">

                    <div class="fv-row form-group">
                <label>Which industry does your organization belong to?</label>
                <div>
                    <input class="form-control" type="checkbox" name="industry[]" value="Manufacturing" id="indManufacturing" min="1" required data-pristine-min-message="Select at least 1" />
                    <label class="label-inline" for="indManufacturing">Manufacturing</label>
                </div>
                <div>
                    <input class="form-control" type="checkbox" name="industry[]" value="Education" id="indEducation" min="1" required data-pristine-min-message="Select at least 1" />
                    <label class="label-inline" for="indEducation">Education</label>
                </div>
                <div>
                    <input class="form-control" type="checkbox" name="industry[]" value="Real Estate" id="indRealestate" min="1" required data-pristine-min-message="Select at least 1" />
                    <label class="label-inline" for="indRealestate">Real Estate</label>
                </div>
                <div>
                    <input class="form-control" type="checkbox" name="industry[]" value="" id="indOther" min="1" required data-pristine-min-message="Select at least 1" />
                    <label class="label-inline" for="indOther">Other</label>                        
                    <input style="display: none;" class="label-inline" type="text" name="indOtherValue" id="indOtherValue" value="" minlength="3"  class="form-control" data-pristine-min-message="Please enter your industry" />
                </div>
            </div>

        <div class="fv-row form-group">
            <label>What is your budget? (In USD)</label>
            <input class="form-control" type="number" min="100" required name="budget"  data-pristine-min-message="Enter at least 100" />
        </div>

        <div class="fv-row form-group">
            <label>How soon do you want to get started??</label>
            <div>
                <input class="form-control" type="radio" name="timeline[]" value="Immediately" id="immediately" required />
                <label class="label-inline" for="immediately">Immediately</label>
            </div>
            <div>
                <input class="form-control" type="radio" name="timeline[]" value="3Months" id="3months" required />
                <label class="label-inline" for="3months">In the next 3 months</label>
            </div>
            <div>
                <input class="form-control" type="radio" name="timeline[]" value="6Months" id="6months" required />
                <label class="label-inline" for="6months">In the next 6 months</label>
            </div>
            <div>
                <input class="form-control" type="radio" name="timeline[]" value="NoIdea" id="noidea" required />
                <label class="label-inline" for="noidea">I don't have a timeline yet</label>
            </div>
        </div>

        <div class="fv-row form-group">
            <label>First Name</label>
            <input class="form-control" type="text" name="fname" required />
        </div>

        <div class="fv-row form-group">
            <label>Last Name</label>
            <input class="form-control" type="text" name="lname" required />
        </div>

        <div class="fv-row form-group">
            <label>Company Email</label>
            <input class="form-control" type="email" name="email" required />
        </div>

        <div class="fv-row form-group">
                <label>No. of Employees</label>
                <select class="form-control" id="ageRangeField" required>
                    <option value=""></option>
                    <option value="1-100">1-100</option>
                    <option value="100-500">100-500</option>
                    <option value="500-2500">500-2500</option>
                    <option value="2500+">2500+</option>
                </select>
        </div>

        <div class="fv-row form-group">
            <input name="formsubmit" id="formsubmit" type="submit" class="" value="Submit"  />
        </div>
    </form>

    <p id="confmsg" style="display: none;">Thank you for submitting the form.</p>
</div>

My JS Code:

window.onload = function () 
{

    var form = document.getElementById("inquiry");

    var pristine = new Pristine(form);

    form.addEventListener('submit', function (e) 
    {
        e.preventDefault();
        var valid = pristine.validate();
        // alert('Form is valid: ' + valid);

        if(valid === true)
        {
            // alert("This works");
            return true;
        }
        else
        {
            // alert("This doesn't work");
        }
    });
};

var sb = document.getElementById('formsubmit');             // Submit button
var cbother = document.getElementById('indOther');          // Checkbox
var txtother = document.getElementById('indOtherValue');    // Other Textbox
cbother.addEventListener('click',function(e){
    if(cbother.checked){
        cbother.value=txtother.value;
        txtother.style.display = 'block';
    }else{
        txtother.value='';
        txtother.style.display = 'none';
    }
},false);

Answer 1

e.preventDefault();

is preventing the form from being submitted. If you simply remove it the form will be submitted even if the pristine check fails. So what you want to do is only prevent the default behaviour (which is the form to be submitted) if the pristine check fails:

form.addEventListener('submit', function (e) 
{
    var valid = pristine.validate();
    // alert('Form is valid: ' + valid);

    if(valid === true)
    {
        // alert("This works");
        return true;
    }
    else
    {
        e.preventDefault();
        // alert("This doesn't work");
    }
});

to simplify that a little you could simply write:

form.addEventListener('submit', function (e) 
{
    //if the pristine check fails, prevent the form from being submitted
    if(!pristine.validate()){
      e.preventDefault();
    }
});