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验证输入元素，如果未填充任何值，则显示为红色使用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

，请帮帮我

谢谢＆amp;问候

Answer 1

通过每个输入运行并检查它的值长度是否大于0.此代码仅适用于输入字段。下拉列表，CheckBox＆es和电台必须以其他方式验证（.is(':checked')

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

循环遍历elements属性

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: