表单验证，普通按钮，红色框和干净的数据

Question

我有一个弹出窗体，我必须在关闭此弹出窗口之前验证此窗体中的字段，我需要使用此验证和普通按钮，而不是提交，如果字段是emty我需要在红色框并将“此字段为空”后。关闭表单后，我需要从表单中清除数据。我应该如何使用jQuery和Javascript做到这一点？

<form id="frmUsers" data-userid="">
        <img id="btnClose" src="resources/img/close_window.png">
        <h2 id="popupTitle"></h2>
        <ul>
            <li>
                <label for="username">Username:</label>
                <input type="text" id="username" name="txtUsername" placeholder="Please select username" class="required"/>
                <p></p>
            </li>
            <li>
                <label for="level">Level:</label>
                <input type="number" id="level" name="txtLevel" placeholder="Please select level"/>
                <p></p>

            </li>
            <li>
                <label for="registrationStatus">RegistrationStatus:</label>
                <select name="txtRegistrationStatus" id="registrationStatus"
                        placeholder="Please select registration status">
                    <option value="Registered">Registered</option>
                    <option value="Unregistered">Unregistered</option>
                </select>
                <p></p>

            </li>
            <li>
                <label for="registrationDate">RegistrationDate:</label>
                <input type="text" id="registrationDate" name="txtRegistrationDate"
                       placeholder="Please select date"/>
                <p></p>
            </li>

            <div class="btnZone">
                <input class="btnDown" type="button" value=" " id="btnPopup" />
                <input class="btnDown" type="button" value="Cancel" id="btnCancel"/>
            </div>
        </ul>
    </form>

我的表单验证功能：

function validateForm() {

    var txtUsername = $("#username").val();

    if(txtUsername == ""){
        ("#username").css("border-color", "red");
    }

    // $(":input").each(function () {
    //     if ($(this).val() == "") {
    //         $(this).css("border-color", "red");
    //         // $("p").html("This field is empty");
    //         // $("input").val("This field is required");
    //         // alert($(this).attr("id") & " validate error");
    //     }else{
    //         $(this).css("border-color", "black");
    //     }
    //
    // });
}

Answer 1

你可以使用众多弹出/模态插件中的一个，但如果你想创建自己的插件，那么你应该做类似的事情：

var txtUsername = $("#username");
function validateForm() {
	txtUsernameValid = $.trim(txtUsername.val());
	txtUsername.toggleClass('invalid-input', !txtUsernameValid);
	return txtUsernameValid;
};
$('[data-popup]').each(function(i) {
	var thisButton = $(this);
	var toPopup = $(thisButton.data('popup'));
	toPopup.wrap('<div class="popup-container"><div class="popup-content"></div></div>');
	var popupContainer = toPopup.closest('.popup-container').hide();
	popupContainer.find('.popup-content').append('<span class="popup-close">X</span>')
	thisButton.on('click', function(e) {
		e.preventDefault();
		popupContainer.show();
	});
	popupContainer.find('.popup-close').on('click', function(e) {
		popupContainer.hide();
	});
	popupContainer.find('#btnSave').on('click', function(e) {
		/* Save your data, than reset the form */
		if( validateForm() ) {
			popupContainer.find('form')[0].reset();
			popupContainer.hide();
		};
	});
	popupContainer.find('#btnCancel').on('click', function(e) {
		popupContainer.find('form')[0].reset();
		popupContainer.hide();
	});
});

body {
    font-family: sans-serif;
}
.popup-container {
    background: none rgba(0, 0, 0, .5);
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    text-align: center;
}
.popup-container::before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.popup-content {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    background: none #fff;
    padding: 10px 20px;
    text-align: left;
}
form ul {
    list-style: none;
    padding: 0;
}
.popup-close {
    display: inline-block;
    padding: 4px;
    position: absolute;
    top: 5px;
    right: 5px;
    cursor: pointer;
}
.invalid-input {
    border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button data-popup="#frmUsers">
    Open form
</button>
<form id="frmUsers" data-userid="">
    <img id="btnClose" src="resources/img/close_window.png">
    <h2 id="popupTitle"></h2>
    <ul>
        <li>
            <label for="username">Username:</label>
            <input type="text" id="username" name="txtUsername" placeholder="Please select username" class="required" />
            <p></p>
        </li>
        <li>
            <label for="level">Level:</label>
            <input type="number" id="level" name="txtLevel" placeholder="Please select level" />
            <p></p>
        </li>
        <li>
            <label for="registrationStatus">RegistrationStatus:</label>
            <select name="txtRegistrationStatus" id="registrationStatus" placeholder="Please select registration status">
                <option value="Registered">Registered</option>
                <option value="Unregistered">Unregistered</option>
            </select>
            <p></p>
        </li>
        <li>
            <label for="registrationDate">RegistrationDate:</label>
            <input type="text" id="registrationDate" name="txtRegistrationDate" placeholder="Please select date" />
            <p></p>
        </li>
        <div class="btnZone">
            <input class="btnDown" type="button" value="Save" id="btnSave" />
            <input class="btnDown" type="button" value="Cancel" id="btnCancel" />
        </div>
    </ul>
</form>

确实并不复杂，但我从不试图发明热水，我只是采用现有插件之一，Magnific Popup。

JSFiddle上的相同代码。