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

Question

我有一个简单的表单，我使用 vanilla JS 库（ https://pristine.js.org/ ）进行表单验证。 表单验证成功（大部分），但随后表单未提交。 对于我的生活，我无法弄清楚出了什么问题。表单应该发布到一个 PHP 文件中，我可以在其中获取发布的变量值。

我的 HTML 页面和必要的 JS 和 CSS 位于这里的 jsfiddle 中。 如果 JSFiddle 出现问题，实际代码如下。

如果有人能帮我解决这个问题，我将不胜感激。

万分感谢！ 德克斯特

PS：我对 JS 有初级的了解。

我的 HTML 代码：

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

我的JS代码：

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

阻止提交表单。 如果您简单地删除它，即使原始检查失败，表单也会被提交。 因此，如果原始检查失败，您想要做的只是阻止默认行为（即要提交的表单）：

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");
    }
});

为了简化一点，您可以简单地编写：

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