How to validate a form Array in Pure Jquery

Question

I have a form something like this

<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>

I have to validate the input element with name monedas , If anyof the values are not filled show it in red Using Jquery

I have created a basic script

$(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();
    }
});

Please help me if out I do not want to use the plugin Jquery.validate

Thanks & Regards

Answer 1

Run via each input and check if it's value length is grater than 0. This code will work only for input fields. Drop Down's, CheckBox'es and Radio's must be validated in other way (by .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

Loop through the elements property

 $(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>