在提交jquery上添加适当的错误消息

时间:2013-03-11 11:45:12

标签: jquery forms error-handling appendto

我有一个提交表单,我需要在客户端使用jQuery添加错误消息。

表格HTML(由他人)是 -

<div class="data">
<h3>Datos de acceso</h3>
<p class="email-login">
    <label for="email-login">Su correo electrónico</label>
    <input id="email-login" name="email-login" type="text" value="Su correo electrónico">
</p>
<p class="password-login">
    <label for="password-login">Elija una contraseña</label>
    <input id="password-login" name="password-login" type="text" value="Elija una contraseña">
</p>
<h3>Datos personales</h3>
<p>
    <label for="name">Nombre y apellidos</label>
    <input id="name" name="name" type="text" value="Nombre y apellidos">
</p>
<div class="data1">
    <p class="gender">
        <span class="female">
            <label for="gender-female">Mujer</label>
            <input id="gender-female" name="gender-female" type="radio" value="Mujer">
        </span>
        <span class="male">
            <label for="gender-male">Hombre</label>
            <input id="gender-male" name="gender-male" type="radio" value="Hombre">
        </span>
    </p>
    <p class="age select">
        <select>
            <option value="" selected="selected">Edad</option>
        </select>
    </p>
</div>
<div class="data2">
    <p class="country select">
        <select></select>
    </p>
    <p class="postal">
        <label for="postalcode">post code</label>
        <input id="postalcode" name="postalcode" type="text" value="post code">
    </p>
</div>
<div class="terms">
    <input type="checkbox" name="terms" value="Acepto las condiciones">
    <p class="checkbox"></p>
    <p>words<a href="#">?</a></p>
</div>
<p class="submit">
    <input class="button" type="submit" value="Conectar">
</p>

我目前有这个jQuery(不能正常工作)

$(document).ready(function() {
    $('input').each(function() {
        var $this = $(this);
        if(!$this.val()) $this.addClass('error');
    });
});

客户端现在每个表单元素都需要不同的错误消息。因此,名称,性别,邮政编码等错误将附加到表单。那可能吗?我在jQuery中做错了什么不能正常工作?

2 个答案:

答案 0 :(得分:0)

一个很好的起点是将jQuery的submit method应用于当前的jquery逻辑。他们还在同一个API页面上有一个输入验证的例子。

答案 1 :(得分:0)

$(document).ready(function() {
   var count=0;
    $('input').each(function() {
       count++;
      var myvar =error+count;
        var $this = $(this);
        if(!$this.val()) $this.addClass(myvar );
    });
});

并为这些eroor消息编写不同的类

或以其他方式使用eroor消息构建数组,其名称为类名 像var

 myarray =new arrau();
  myarray .push(eroorthatwahtuwantname);


$(document).ready(function() {

    $('input').each(function() {


        var $this = $(this);
             var req=this.name();
        if(!$this.val()) $this.addClass(getNmae(req,myarray ) );
    });


function getNmae (str, strArray) {
    for (var j=0; j<strArray.length; j++) {
        if (strArray[j].match(str)) return j;
    }
    return -1;
}