Question

我是javascript的新手，我正在尝试制作一个验证表单，一旦你点击输入字段就会验证。我一直在尝试许多不同的方法来将模糊添加到我创建的当前验证表单中。

我怎样才能在模板上添加模糊效果？谢谢:)）

function addFormValidation(theForm) {

    if (theForm === null || theForm.tagName.toUpperCase() !== 'FORM') {
        throw new Error("expected first parameter to addFormValidation to be a FORM.");
    }

    theForm.noValidate = true;

    theForm.addEventListener('submit', function(evt) {
        var isError = false;

        var elements = this.elements;
        for (var i = 0; i < elements.length; i += 1) {
            if (! isFieldValid(elements[i])) {
                isError = true;
            }
        }

        if (isError) {
            evt.preventDefault();
        }
    });

    function isFieldValid(field) {
        var errorMessage = "";

        if (! needsToBeValidated(field)) {
            return true;
        }

        if (field.id.length === 0 || field.name.length === 0) {
            console.error("error: ", field);
            throw new Error("found a field that is missing an id and/or name attribute. name should be there. id is required for determining the field's error message element.");
        }

        field.classList.remove('invalid');

        var errorSpan = document.querySelector('#' + field.id + '-error');

        if (errorSpan === null) {
            console.error("error: ", field);
            throw new Error("could not find the '#" + field.id + "-error' element. It's needed for error messages if #" + field.id + " is ever invalid.");
        }

        errorSpan.classList.remove('danger');
        errorSpan.innerHTML = "";

        if (field.minLength > 0 && field.value.length < field.minLength) {
            errorMessage = "Must be " + field.minLength + " or more characters long.";
        }

        if (field.type === "email" && !isEmail(field.value)) {
            errorMessage = "This should be a valid email address.";
        }

        if (field.required && field.value.trim() === "") {
            errorMessage = "This field is required.";
        }

        if (errorMessage !== "") {
            field.classList.add('invalid');

            errorSpan.classList.add('danger');
            errorSpan.innerHTML = errorMessage;
            return false;
        }

        return true;
    }

    function needsToBeValidated(field) {
        return ['submit', 'reset', 'button', 'hidden', 'fieldset'].indexOf(field.type) === -1;
    }

    function isEmail(input) {
        return input.match(/^([a-z0-9_.\-+]+)@([\da-z.\-]+)\.([a-z\.]{2,})$/);
    }
}

HTML

<div class="content">
<form id="contact-form" method="POST" action="success.html">

  <div class="form-group">
    <label for="firstname">First Name</label>
    <input id="firstname" type="text" name="firstname" value="" onblur="addFormValidation('firstname');"/>
    <span id="firstname-error"></span>
  </div>

  <div class="form-group">
    <label for="lastname">Last Name</label>
    <input id="lastname" type="text" name="lastname" onblur="addFormValidation('lastname');">
    <span id= "lastname-error" ></span>
  </div>

  <div class="form-group">
    <label for="email">Email Address</label>
    <input id="email" type="email" name="email" required>
    <span id="email-error"></span>
  </div>

              <div class="form-group">
    <label for="flight">Flight</label>
    <select name="flight" id="flight" required>
    <option value="">Please select a flight</option>
    <option value="1">Fixed Wing</option>
    <option value="2">Helicopter</option>
    <option value="3">Glider</option>
    </select>
    <span id="flight-error"></span>
  </div>



        <div class="form-group">
    <label for="date">Date</label>
    <input id="date" type="date" name="date" required>
    <span id="date-error"></span>
  </div>

        <div class="form-group">
    <label for="time">Time</label>
    <input id="time" type="time" name="time" required>
    <span id="time-error"></span>
  </div>

        <div class="form-group">
    <label for="duration">Duration</label>

    <select name="duration" id="duration" required>
    <option value="">Please select your desired duration</option>
    <option value="1">1 Hour</option>
    <option value="2">2 Hours</option>
    <option value="3">3 Hours</option>
    <option value="4">4 Hours</option>
    <option value="5">5 Hours</option>
    </select>
    <span id="duration-error"></span>
  </div>



  <div class="form-group">
    <button type="submit">Submit</button>
  </div>

</form>
</div>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    addFormValidation(document.querySelector('#contact-form'));
  });
</script>

http://jsfiddle.net/dLz5w2tz/

Answer 1

我总是建议不要使用元素属性（onblur）来执行javascript事件;相反，您可以将监听器添加到您的JavaScript代码中。

我已经对您的代码进行了以下操作：

删除“onblur”属性
在JS中添加代码以侦听整个表单上的模糊事件（所有元素）。

JS剪了

theForm.addEventListener('blur', function(evt) {
    console.log(evt);
}, true);

更新了JS小提琴：http://jsfiddle.net/dLz5w2tz/1/

注意： addEventListner需要3个参数 - 1.“事件” 2.执行功能 3. boolean - 它应该向上传播/传播事件。

所以基本上，在这段代码中，事件发生在表单元素（输入）上，并冒泡到表单本身。您可以通过查看事件变量（evt）来验证这一点。

将“onblur”添加到验证表单中

1 个答案:

将“onblur”添加​​到验证表单中

1 个答案:

将“onblur”添加到验证表单中