Question

我有一个jquery函数来检查我视图中UsernameTextbox上的有效数据。我想阻止用户点击Register按钮，直到此字段有效。

禁用按钮是最好的方法吗？我只是想在值无效时，用户点击按钮只关注UsernameTextbox提交的文件？

更新代码：

这是我的模特：

    [Required]
    [Remote("CheckUsername", "Account", ErrorMessage = "Username already exits.")]
    public string Username { get; set; }

和控制器使用GET方法：

[HttpGet]
    public JsonResult CheckUsername(string userName)
    {
        var user = IUserRepo.GetUserByUrName(userName);
        bool isValid = true;
        if (user!=null)
        {
            isValid = false;
        }
        return Json(isValid, JsonRequestBehavior.AllowGet);
    }

并在我的视图中：

 @using (Ajax.BeginForm("Register","Account",new {area = "Area"},null))
    {
        @Html.ValidationSummary(true) 
        <table>
            <tbody>
                <tr>
                    <td class="info_label">Tên đăng nhập</td>
                    <td>@Html.EditorFor(m => m.User.Username)
                    </td>
                    <td class="check_user">@Html.ValidationMessageFor(m => m.User.Username)</td>
                </tr>
                <tr> ........

为什么没有出现错误信息？我希望在用户填写数据时中间有效，或者保留此网站http://yame.vn/TaiKhoan/DangKy之类的文本框。

Answer 1

注意：以下提到的建议仅适用于MVC3及以上

Luffy，您可以删除Ajax调用以检查UserName是否存在

我们该怎么做？

<强>模型

public class UserModel
{
    // Remote validation is new in MVC3. Although this will also generate AJAX
    // call but, you don't need to explicitly type the code for Ajax call to
    // check the User Existence. Remote Validation will take care of it.
    [Required]
    [Remote("CheckUsername", "Account", ErrorMessage = "User Already Exist")]
    public string UserName { get; set; }
}

<强>控制器

[HttpGet]
public JsonResult CheckUsername(string MyProp)
{
    // Your Validation to check user goes here
    bool isValid = true;
    return Json(isValid, JsonRequestBehavior.AllowGet);
    //Note - This will be called whenever you post the form.
    //This function will execute on priority, after then the Index 
    //Post Action Method.
}

[HttpGet]
public ActionResult Index()
{
    return View();
}

[HttpPost]
public ActionResult Index(UserModel model)
{
    // This action method will execute if the UserName does not exists 
    // in the DataBase
    return View(model);
}

查看

@using (Ajax.BeginForm("Action", "Controller", new { area = "Area" }, null)) { @Html.TextBoxFor(i => i.UserName); <input type="submit" name="Submit" value="Submit" /> // Whenever you submit the form, the control will go directly to // CheckUsername function. In case the UserName doesn't exists only // then the Post action method will be executed. }

<强>脚本

<script src="jquery-1.7.1.min.js" type="text/javascript"></script> <script src="jquery.validate.min.js" type="text/javascript"></script> <script src="jquery.validate.unobtrusive.min.js" type="text/javascript"></script>

Answer 2

试试这个

function CheckUserNameExits() {
$("#User_Username").on("blur", function () {
    $("#User_Username").addClass("thinking");
    var username = $("#User_Username").val();
    if (username == "") {
        $(".check_user").html("Ba?n chua nhâ?p tên dang nhâ?p.");
        $("#User_Username").removeClass("thinking");
        $("#User_Username").removeClass("approved");
        $("#User_Username").addClass("denied");
        $("#User_Username").focus();
        $("#User_Username").select();
        return false;
    }
    $.ajax({
        url: "/Account/CheckUsername",
        data: { userName: username },
        dataType: "json",
        type: "POST",
        error: function () {
            return false;
        },
        success: function (data) {
            if (data) {
                $("#User_Username").removeClass("thinking");
                $("#User_Username").removeClass("denied");
                $("#User_Username").addClass("approved");
                $(".check_user").html("");
                //$("#createuser").prop("disabled", false);
                return true;
            }
            else {
                $("#User_Username").removeClass("thinking");
                $("#User_Username").removeClass("approved");
                $("#User_Username").addClass("denied");
                $(".check_user").html("Tên dang nhâ?p da~ duo?c du`ng, vui lo`ng cho?n tên kha´c.");
                $("#User_Username").focus();
                $("#User_Username").select();
                //$("#createuser").prop("disabled", true);
                return false;
            }
        }
    });
});
}
function CheckValidate()
{
    if (!CheckUserNameExits()){
        return false;
        }
    return true;
}


<input id="createuser" type="submit" value="Ðang ky´ ta`i khoa?n"  onclick="return CheckValidate();" />

Answer 3

可能最好使用jQuery启用/禁用按钮方法。

Fistly按钮被禁用：

$(document).ready(function(){
$( ".register" ).button("disabled");
});

如果你的函数返回true，则启用按钮

function CheckUserNameExits() {

//*If your function is success
$( ".register" ).button( "enable" );

})

如果指定字段无效，我如何阻止用户单击按钮提交表单？

3 个答案:

我们该怎么做？