How can i prevent User click the button to submit form if specify field is not valid?

问题

I have a jquery function to check valid data on UsernameTextbox in my View. I want to prevent User click on the Register button until this field valid.

Disable button is it the best method? I just want when the value is not valid, user click on button just focus to the UsernameTextbox filed?

Update Code:

Here is my Model :

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

and Controller with GET method:

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

and in my View :

 @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> ........

Why no error message appear? And i want to valid intermediately when user fill data or leave textbox like this site http://yame.vn/TaiKhoan/DangKy.

回答1:

Note : The below mentioned suggestion is only for MVC3 and above

Luffy, you can remove the Ajax Call to check UserName existence

How can we do that ?

Model

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; }
}

Controller

[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);
}

View

@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.
}

Scripts

<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>

回答2:

Try this

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();" /> 

回答3:

May be it would be better to use jQuert enable/disable button method.

Fistly button is disable:

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

Than, if your function return true, enable button

function CheckUserNameExits() {

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

})

来源：https://stackoverflow.com/questions/18100819/how-can-i-prevent-user-click-the-button-to-submit-form-if-specify-field-is-not-v