表單驗證成功但表單未提交

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