有没有人可以帮助我进行联系表单验证？

Question

我正在尝试将输入验证功能与提交功能结合起来，以便拥有功能齐全的简单联系表单，该表单可以对错误/正确的输入类型和空字段做出反应。使用boostrap 4，阅读验证文档，但我不明白为什么即使只填写了一个字段并且不需要电子邮件也会发送联系表格：/ :(。我是JS的菜鸟，无法做到这一点并且疯了 - 在那里堆了 8 个小时。script.js 中的注释代码在那里，因为我试图结合不同的东西。

有人可以重写我的功能吗？

这是表单的代码：

'use strict';
//---------Contact form SEND-----------
window.addEventListener("DOMContentLoaded", function () {
  // Fetch all the forms we want to apply custom Bootstrap validation styles to
  var forms = document.getElementsByClassName('needs-validation');  
  // get the form elements defined in your form HTML above
  var form = document.getElementById("bootstrapForm");
  // var button = document.getElementById("my-form-button");
  var status = document.getElementById("status");

  // Success and Error fn-s after form submission
  function success() {
    form.reset();
    status.classList.add("success");
    status.innerHTML = "Správa bola úspešne odoslaná.";
  }

  function error() {
    status.classList.add("error");
    status.innerHTML = "Pri odosielaní správy sa vyskytol problém";
  }



  var validation = Array.prototype.filter.call(forms, function(form) {
    // handle the form submission event
    form.addEventListener('submit', function(e) {
      if (form.checkValidity() === false) {
        e.preventDefault();
        e.stopPropagation();
        var data = new FormData(form);
        ajax(form.method, form.action, data, success, error);
      }
      form.classList.add('was-validated');
    }, false);
  });
}, false);

// helper function for sending an AJAX request

function ajax(method, url, data, success, error) {
  var xhr = new XMLHttpRequest();
  xhr.open(method, url);
  xhr.setRequestHeader("Accept", "application/json");
  xhr.onreadystatechange = function () {
    if (xhr.readyState !== XMLHttpRequest.DONE) return;
    if (xhr.status === 200) {
      success(xhr.response, xhr.responseType);
    } else {
      error(xhr.status, xhr.response, xhr.responseType);
    }
  };
  xhr.send(data);
}









$(function()
{



    // Contact forms
    "use strict";

    // Detect when form-control inputs are not empty
    $(".cool-b4-form .form-control").on("input", function() {
      if ($(this).val()) {
        $(this).addClass("hasValue");
      } else {
        $(this).removeClass("hasValue");
      }
    });


});

这是我的网站（表格在底部），以便您在移动中看到它：https://marekcmarko.sk

Answer 1

我也是菜鸟，不知道如何编写您需要的功能。 但是，通过阅读问题，我想您可以通过将“必需”属性直接添加到您的 html 来解决它。这样，如果您的表单中的某个字段未填写，则不会发送该表单。 type 属性还可以帮助验证正确的输入类型。

<form>
        <div>
        <label for="Name">First Name:</label>
        <input id="Name" type="text" name="Name" placeholder="John" required>

        <label for="Last Name">Last Name:</label>
        <input id="Last Name" type="text" name="Last Name" placeholder="Smith" required>
        </div>

        <div>
        <label>
        Male
        <input type="radio" name="Gender" value="Male">
        </label>

        <label>
        Female
        <input type="radio" name="Gender" value="Female">
        </label>

        <label>
        Other
        <input type="radio" name="Gender" value="Other">
        </label>
        </div>

        <div>
        <label for="email">Email:</label>
        <input id="email" type="email" name="email" required>

        <label>
            Password:
            <input type="password" name="password" pattern=".{5,10}" required title="Enter  5 to 10 characters">
        </label>
        </div>


        <div>
        

        <fieldset>
            <legend>Birthday:</legend>
            <label for="month">Month:</label>
            <select name="month" id="month">
                <option value="january">Jan</option>
                <option value="february">Feb</option>
                <option value="march">Mar</option>
                <option value="april">Apr</option>
            </select>

            <label for="day">Day</label>
            <select name="day" id="day">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
            </select>
            <label for="year">Year</label>
            <select name="year" id="year">
                <option value="2015">2015</option>
                <option value="2014">2014</option>
                <option value="2013">2013</option>
                <option value="2012">2012</option>
                <option value="2011">2011</option>
                <option value="2010">2010</option>
            </select>
        </fieldset>

        </div>
        
        <div>
        <label for="Terms">I agree to the terms and conditions</label>
        <input id="Terms" type="checkbox" name="Terms" value="x">
        </div>

        <button>Submit</button>
    </form>