Question

我正在制作一个简单的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']
        },
    }
});


});

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

Answer 1

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

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

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

远程选项只是一个普通的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
  }
}

JS验证 - 有效输入＆amp; loagin酒吧，而远程

1 个答案: