Question

我有这样的表格：

<form action="contact.php" method="post" id="contactform">
          <ol>
            <li>
              <label for="name">First Name * </label>
              <input id="name" name="name" class="text" />
            </li>
            <li>
              <label for="email">Your email * </label>
              <input id="email" name="email" class="text" />
            </li>
            <li>
              <label for="company">Company</label>
              <input id="company" name="company" class="text" />
            </li>
            <li>
              <label for="subject">Subject</label>
              <input id="subject" name="subject" class="text" />
            </li>
            <li>
              <label for="message">Message * </label>
              <textarea id="message" name="message" rows="6" cols="50"></textarea>
            </li>

            <li class="buttons">
              <input type="image" name="imageField" id="imageField" src="images/send.gif" />
            </li>
          </ol>
        </form>

这个javascript函数做了一些基本的验证：

function validateRequired(field,alerttxt) {
    with (field) {
        if (value==null||value=="") {
            alert(alerttxt);
            return false;
        }
        return true;
    }
}

这个脚本（用jquery编写）拦截提交事件

jQuery(document).ready(function(){
    $('#contactform').submit(function(){
        ...
    });
});

问题是，在最后一个脚本中，我想调用validateRequired作为第一个传递每个必需的输入/ textarea（即：name，email和message）参数。

我试过这样：

validateRequired($('#name'));

但它不起作用。

我该怎么做？

Answer 1

我首先要为每个必需的输入添加一个类。

  <li>
    <label for="subject">Subject</label>
    <input id="subject" name="subject" class="text required" />
  </li>

然后用一个jQuery选择器选择所有必需的输入并迭代它们。

jQuery(document).ready(function(){
  $('#contactform').submit(function(){
    $('#contactform input.required').each(function(){
      validateRequired(this, this.attr('name') + ' is required');
    });
  });
});

虽然这会发出类似“主题是必需的”的通用警报，但希望您可以使用此迭代器模式来实现更好的用户体验，可能通过突出显示具有不同背景颜色的所需文本字段。

jQuery(document).ready(function(){
  $('#contactform').submit(function(){
    $('#contactform input.required').each(function(){
      this.addClass('error');
      alert('The fields highlighted in red are required');
    });
  });
});

Answer 2

我受到了Jeff Vyduna解决方案的启发，但我自己解决了这个问题。

$('#contactform').submit(function(){
            var submit = true;

        $('#contactform *.required').each(function(){
                if(!validateRequired(this, this.id + ' is required'))
                {
                    submit = false;
                    return false;
                }
        });

        return submit;
});

显然输入字段（包括textarea）必须属于required类。

通过深层嵌套元素在JQuery中运行

2 个答案: