验证表单JS

Question

我有3个输入字段我需要验证并在字段通过时启用按钮（更改颜色）但在没有时标记错误。 我一直使用form-js这是一个大型的外部文件形式。 有没有更自定义的方式来做到这一点？做一个字段的例子会让我开始。这是我的代码：

<script>
  !function($) {
    $.fn.formvalidator = function(options) {
        function toggleButton() {
            options.alwaysActive || (validateAllRequiredField() ? $(form).find(":submit").removeAttr("disabled") : $(form).find(":submit").attr("disabled", "disabled"));
        }
        function validateAllRequiredField(showErrorText) {
            var filled = !0, showErrorText = showErrorText || !1;
            return $(form + " input[mandatory=true]," + form + " select[mandatory=true]").each(function() {
                var field = $(this), isValid = !0;
                if ("input" == field.get(0).nodeName.toLowerCase()) {
                    if ("text" == field.attr("type") || "password" == field.attr("type")) {
                        if (!field.hasClass("mandatory") || "" != field.val().trim() && field.val().toLowerCase() != field.attr("labeltext").toLowerCase() || (filled = !1, 
                        isValid = !1), "password" == field.get(0).type && "false" != field.attr("lengthCheck") && (field.val().length < 5 || field.val().length > 20) && (filled = !1), 
                        field.hasClass("emailfield")) {
                            var filter = /^[a-zA-Z0-9\-_]+(\.[a-zA-Z0-9\-_]+)*@[a-z0-9]+(\-[a-z0-9]+)*(\.[a-z0-9]+(\-[a-z0-9]+)*)*\.[a-z]{2,4}$/, emailValid = filter.test(field.val());
                            emailValid || (filled = !1);
                        }
                        showErrorText && !isValid && (field.val(field.attr("labeltext")).addClass("error"), 
                        field.hasClass("textinputpw") && (field.get(0).type = "text"));
                    }
                } else "select" == field.get(0).nodeName.toLowerCase() && "" == field.val() && (field.parents(".value").addClass("error"), 
                filled = !1);
            }), filled;
        }
        function init() {
            $(form).submit(onSubmit), toggleButton(), bindEvents();
        }
        function onSubmit() {
            return beforeSubmit();
        }
        function beforeSubmit() {
            $(form + " input.textinputpw," + form + " input.textinput").each(function() {
                var input = $(this);
                input.attr("labeltext").toLowerCase() == input.val().toLowerCase() && input.val("");
            });
            var customValidationSuccess = !0;
            "function" == typeof options.onBeforeSubmit && (customValidationSuccess = options.onBeforeSubmit(form, options));
            var formValidationSuccess = validateAllRequiredField(!0);
            return customValidationSuccess && formValidationSuccess;
        }
        function bindEvents() {
            $(form + " input.textinputpw," + form + " input.textinput").focus(function() {
                var input = $(this);
                input.closest(".errorresponse").removeClass("errorresponse"), (input.hasClass("textinputpw") || input.val().toLowerCase() == input.attr("labeltext").toLowerCase()) && (input.val("").removeClass("error"), 
                input.hasClass("textinputpw") && (input.get(0).type = "password"));
            }).bind("blur", function() {
                var input = $(this);
                ("" == input.val() || input.attr("labeltext").toLowerCase() == input.val().toLowerCase()) && (input.hasClass("textinputpw") && (input.get(0).type = "text"), 
                input.val(input.attr("labeltext")), void 0 != input.attr("mandatory") && "true" == input.attr("mandatory") && input.addClass("error")), 
                toggleButton();
            }).bind("keyup", function() {
                toggleButton();
            });
        }
        var $this = $(this), form = $this.selector, defaults = {
            alwaysActive: !1,
            onBeforeSubmit: !1
        }, options = $.extend(defaults, options || {});
        init();
    };
}(jQuery);

</script>

.textinput {
  border: 1px solid #000;
  border-radius: 0;
  box-sizing: border-box;
  color: #6c6c6c;
  height: auto;
  margin: 0px auto 15px auto;
  padding: 4px 0 5px 10px;
  width: 100%;
  font-family: Apercuregular, sans-serif;
  font-weight: normal;
  letter-spacing: .02em;
  font-size: 16px;
  display: block;
  width: 300px;
}

.form-button {
  background-color: #000;
  color: #fff;
  display: block;
  letter-spacing: .02em;
  font-family: Apercuregular, sans-serif;
  font-size: 13px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  padding: 1.2em 2em 1.2em 2em;
  width: 275px;
  margin: 25px auto 25px auto;
  border: 1px solid #000;
  outline: none;
}

.form-button[disabled],
.form-button[disabled]:hover {
  background-color: #d1d3d4;
  color: #fff;
  border: 0 none;
}

.form-button:focus,
.form-button:hover {
  background: #f3f3f3;
  color: #000;
  border: 1px solid #f3f3f3;
  -moz-transition: all .4s ease-in-out;
  -o-transition: all .4s ease-in-out;
  -webkit-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out;
}

.fieldLabel {
  display: block;
  font-size: 13px;
  font-family: Apercuregular, sans-serif;
  letter-spacing: .02em;
  text-align: left;
  width: 100%;
  line-height: 17px;
}

input[type="checkbox"] {
  display: none;
}

input[type="email"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

<div id="container_COLUMN1">
  <input type="text" name="First Name" id="control_COLUMN1" label="First Name" class="textinput mandatory" placeholder="First name*" required labeltext="First name*" maxlength="50" mandatory="true">
</div>
<div id="container_COLUMN2">
  <input type="text" name="Last name" id="control_COLUMN2" label="Lat Name" class="textinput mandatory" placeholder="Last name*" required labeltext="Last name*" maxlength="50" mandatory="true">
</div>
<div id="container_EMAIL">
  <input type="text" name="Email" id="control_EMAIL" labeltext="Email" label="Email" class="textinput email mandatory" placeholder="Email address*" required mandatory="true">
</div>
<div>
  <button type="submit" class="defaultText form-button" id="submitBtn" value="Enter Now">Enter Now</button>
</div>