如何在Pure Jquery中驗證表單數組

Question

我有這樣的形式

<form name="monedaForm" action="index.php" mehotd="post">
    <table>
        <tr>
            <td>$</td>
            <td>
                <input type="text" name="monedas[]" value="" />
            </td>
        </tr>
        <tr>
            <td>Yen</td>
            <td>
                <input type="text" name="monedas[]" value="" />
            </td>
        </tr>
        <tr>
            <td>MXM</td>
            <td>
                <input type="text" name="monedas[]" value="" />
            </td>
        </tr>
        <tr>
            <td>Rupee</td>
            <td>
                <input type="text" name="monedas[]" value="" />
            </td>
        </tr>
    </table>
</form>

我必須使用monedas名稱驗證輸入元素，如果未填充任何值，請使用紅色將其顯示為紅色。

我已經創建了一個基本腳本

$(document).on('submit', '#formMonedas', function (event) {
    var id = $(this).attr('id');
    if (id == 'formMonedas') {
        //How should I validate it here ? 
        if () $(this).submit();
        else e.preventDefault();
    }
});

如果我不想使用插件Jquery.validate，請幫助我

感謝和問候

Answer 1

通過每個輸入運行，並檢查其值長度是否大於0。此代碼僅適用於輸入字段。 下拉菜單，復選框和單選按鈕必須以其他方式進行驗證（通過.is(':checked')

 $(document).ready(function() { $("#formMonedas").submit(function() { $(".validate", this).css("border", "1px solid #ddd"); var valid = true; $.each($(".validate", this), function() { if ($(this).val().length == 0) { $(this).css("border", "1px solid red"); valid = false; } }); if (valid) { alert("Valid - submitting"); //return true; } return false; }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id="formMonedas" action="http://example.com"> <input type="text" name="monedas[]" class="validate" /> <input type="text" name="monedas[]" class="validate" /> <input type="text" name="monedas[]" class="validate" /> <input type="text" name="monedas[]" class="validate" /> <input type="text" name="monedas[]" class="validate" /> <button>Submit</button> </form> 

Answer 2

遍歷elements屬性

 $(document).ready(function() { $('#formMonedas').on('submit', function (event) { var valid = true; // set var to check if valid $(this.elements).each(function(){ // loop elements (inputs,selects) and check if value is filled if(!$(this).val().length && (this.nodeName == 'INPUT' || this.nodeName == 'SELECT')) { valid = false; // set valid to false $(this).css("border", "1px solid red"); } }); if (!valid) event.preventDefault();// prevent if not valid }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id="formMonedas" action="http://example.com"> <input type="text" name="monedas[]" /> <input type="text" name="monedas[]" /> <input type="text" name="monedas[]" /> <input type="text" name="monedas[]" /> <input type="text" name="monedas[]" /> <input type="submit" value="Submit (input)"> <button>Submit (button)</button> </form>