在输入内容之后,我想返回输入的给定值

时间:2011-05-27 23:06:42

标签: javascript jquery validation jquery-validate

出于某种原因,我无法弄清楚在输入内容后如何返回输入的值。这与this problem有关,如果没有识别用户名值,我无法验证任何内容。我正在运行jQuery 1.6.1和Validate 1.8.1。

这是表单HTML:

<form class="cmxform" action="register.php" method="post" name="signup" id="signup">
   <ul>
      <li>
        <label for="username">Username: <em>*</em></label>
        <input type="text" id="username" name="Username" size="20" class="required" placeholder="Username" />
      </li>
   </ul>
</form>

在提交表单之前,我想确保我可以在输入中看到我输入的用户名的值。我有一个警报,返回用户名的值,但警报始终没有显示任何内容。这是我正在使用的JS代码:

$(document).ready(function(){

var username = $("#username").val();
var parameter = "action=checkusername&username="+username;

$.validator.addMethod("checkAvailability",function(value,element){
    $.ajax({
          url: "dbquery.php",
          type: "POST",
          async: false,
          data: parameter,
          success: function(output) {
                     alert (username);
                     return true;
         }
     });
},"Sorry, this user name is not available");

// jQuery Validation script
    $("#signup").validate( {
        rules: {
            Username: {
                required: true,
                minlength: 5,
                checkAvailability: true // remote check for duplicate username
                }
            }
        },
        messages: {
            Username: {
                required: "Enter a username"
            }
        },
        submitHandler: function(form) {
            form.submit();
        }
    });

我应该使用val()以外的其他内容来获取用户名的值吗?我很困惑,为什么它没有给我我需要的价值!

2 个答案:

答案 0 :(得分:1)

您在javascript的开头很难编写用户名。在addMethod成功调用

中进行
$.validator.addMethod("checkAvailability",function(value,element){
  var nameAvailable = false;
  $.ajax({
      url: "dbquery.php",
      type: "POST",
      async: false,
      data: "action=checkusername&username="+value,
      success: function(output) {
        //server returns whether username is valid or not
        //if it is valid set nameAvailable to true like so:
        nameAvailable = true;
      }
  });

  return nameAvailable;

});

$("#signup").validate({
  username: {
    required: true,
    checkAvailability: true
  },
  messages: {
    username: {
      required: "Username is required",
      checkAvailability: "Sorry, this user name is not available"
    }
  },
  submitHandler: function(form) {
    form.submit();
  }
});

HTML

<input type="text" id="username" name="username" size="20" class="required checkAvailability" placeholder="Username" />

将它放在你拥有它的位置意味着当页面加载时它立即抓取用户名文本字段中的值,该字段将为空。

编辑:

稍微更改了代码以正常工作

编辑:jsfiddle of above code

答案 1 :(得分:0)

$。val()<input>s上没问题。 给我们一个链接?也许我们可以在那里看到它?

此外,如果ID确实是用户名而不是 uname ,则“for”属性应为用户名

由于你给 $。ajax 一个已经字符串化的字符串,请尝试添加 processData:false