0

我正在制作一个带有验证的简单 javascript 表单。我已经计划好了我的 sintax 和一切，但我需要两件事的帮助：

我已经将我的 JS 模板化为输出错误，但是如果输入通过验证确定，我如何将输入框颜色更改为“绿色”？

到目前为止我的模板错误：

$.validator.setDefaults(
{
showErrors: function(map, list) 
{
    this.currentElements.parents('label:first, .controls:first').find('.error').remove();
    this.currentElements.parents('.control-group:first').removeClass('error');

    $.each(list, function(index, error) 
    {
        var ee = $(error.element);
        var eep = ee.parents('label:first').length ? ee.parents('label:first') : ee.parents('.controls:first');

        ee.parents('.control-group:first').addClass('error');
        eep.find('.error').remove();
        eep.append('<p class="error help-block"><span class="help-block error">' + error.message + '</span></p>');
    });
    //refreshScrollers();
}
});

如果可以的话，你能帮我插入改变颜色的功能吗？我就是想不通。

另一件事是在 javascript 远程检查用户/电子邮件是否存在时显示“加载”图像。我已经准备好一切准备工作，但我不能也不知道如何在检查时显示加载图像（在给出错误结果之前），也没有告诉结果是好的（仅在那些字段中）。我的远程功能：

$(function()
{
// validate signup form on keyup and submit
$("#registerform").validate({
    rules: {
        firstname: "required",
        lastname: "required",
        username: {
            required: true,
            minlength: 3,
            remote:{
                url: "inc/core/check_user.php",
                type: "post",
                data: {
                    username: function(){
                        return $( "#username" ).val();
                    }
                }
            }
        },
        password: {
            required: true,
            minlength: 5
        },
        confpassword: {
            required: true,
            minlength: 5,
            equalTo: "#password"
        },
        scode: {
            required: true,
            minlength: 4,
            maxlength: 6,
            digits: true
        },
        scodeconf: {
            required: true,
            minlength: 4,
            maxlength: 6,
            digits: true,
            equalTo: "#scode"
        },
        email: {
            required: true,
            email: true,
            remote:{
                url: "inc/core/check_email.php",
                type: "post",
                data: {
                    email: function(){
                        return $( "#email" ).val();
                    }
                }
            }
        },
        topic: {
            required: "#newsletter:checked",
            minlength: 2
        },
        agree: "required",
        address: "required",
        zipcode: "required",
        city: "required",
        state: "required",
        country: "required",
        data: "required",
        age: "required"
    },
    messages: {
        firstname: $lang['register_jquery_pnome'],
        lastname: $lang['register_jquery_unome'],
        username: {
            required: $lang['register_jquery_username'],
            minlength: $lang['register_jquery_username_min'],
            remote: $lang['register_jquery_username_registado'],
        },
        password: {
            required: $lang['register_jquery_password'],
            minlength: $lang['register_jquery_password_min']
        },
        confpassword: {
            required: $lang['register_jquery_password'],
            minlength: $lang['register_jquery_password_min'],
            equalTo: $lang['register_jquery_password_equalto']
        },
        email:{
         required: $lang['register_jquery_email_valido'],
         remote: $lang['register_jquery_email_registado']
         },
        agree: $lang['register_jquery_tos'],
        address: $lang['register_jquery_morada'],
        zipcode: $lang['register_jquery_zipcode'],
        city: $lang['register_jquery_city'],
        state: $lang['register_jquery_state'],
        country: $lang['register_jquery_pais'],
        data: $lang['register_jquery_data'],
        age: $lang['register_jquery_age'],
        scode: {
            required: $lang['register_jquery_codigoseguranca'],
            minlength: $lang['register_jquery_codigoseguranca_min'],
            maxlenght: $lang['register_jquery_codigoseguranca_max'],
            digits: $lang['register_jquery_codigoseguranca_digits']
        },
        scodeconf: {
            required: $lang['register_jquery_codigoseguranca'],
            minlength: $lang['register_jquery_codigoseguranca_min'],
            maxlenght: $lang['register_jquery_codigoseguranca_max'],
            digits: $lang['register_jquery_codigoseguranca_digits'],
            equalTo: $lang['register_jquery_codigoseguranca_equalto']
        },
    }
});


});

有人可以帮我解决这两件事吗？提前致谢！

4

1 回答 1

0

要更改有效元素的颜色，您可以通过将以下内容添加到您的验证函数来为它们添加一个类：

$("#registerform").validate({
  validClass: "success",
// your code
});

然后为您的课程设置样式success：.success {background-color: green}

remote 选项只是一个普通的 jQuery.ajax() 调用，因此您可以使用所有相同的设置。

应该是这样的：

remote:{
  url: "inc/core/check_user.php",
  beforeSend: function( xhr ) {
    //your code to show a message
  },
  type: "post",
  data: {
    username: function(){
      return $( "#username" ).val();
    }
  },
  complete: function() {
    // your code to hide the message
  }
}
于 2013-09-19T23:02:04.620 回答