如何在 Pure Jquery 中验证表单数组

How to validate a form Array in Pure Jquery

本文关键字：验证 表单 数组 Jquery Pure      更新时间：2023-09-26

>我有一个这样的形式 

<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 的名字验证输入元素，如果任何值没有填充，则使用 Jquery 将其显示为红色

我创建了一个基本脚本

$(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 ，请帮助我

感谢和问候

遍历元素属性

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

通过每个输入运行并检查其值长度是否大于 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>

相关文章：