Question

其中一个文本框的cshtml代码。我尝试在表单提交上触发一个函数，检查是否在文本框中键入了任何内容。如果文本框中没有输入任何内容，则边框应变为红色。

@model WebForum.Models.AccountViewModel

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="~/Scripts/Custom.js"></script>
</head>



<h2 style="font-size:larger">CreateAccount</h2>

<p style="font-size:large">Please enter BOTH an account name and a password.</p>

<div id="account_create">

    @using (Html.BeginForm("AccountCreated", "Home", FormMethod.Post, new { @id = "accountform" }, )) 
    {

        @Html.TextBoxFor(Model => Model.Account_Name, new { @id = "account_name", @placeholder = "Your Account Name" })
        <br /> 
        <br />
        @Html.TextBoxFor(Model => Model.Password, new { @id = "account_password", @placeholder = "Type Password Name" })
        <br />
        <br />
        @Html.ValidationMessageFor(m => Model.Account_Name)
        @Html.ValidationMessageFor(m => Model.Password)
        <form id="accountform" onsubmit="accountform()">
            <input type='submit' id="accountform" name="Create Account">
        </form>

            }

</div>

继承人的javascript文件。该函数应在=＆＃34; onsubmit＆＃34;上触发。我尝试了各种形式的.onsubmit，但他们还没有工作。

//run on form submit

function loginform() {

    if ($('#account_name').val() == '') {

        $('#account_name').css('border-color', 'red');

    }
    else {

        $('#account_name').css('border-color', '');

    }

    if ($('#account_password').val() == '') {

        $('#account_password').css('border-color', 'red');

    }
    else {

        $('#account_password').css('border-color', '');

    }

};

function accountform() {

    if ($('#account_name').val() == '') {

        $('#account_name').css('border-color', 'red');

    }
    else {

        $('#account_name').css('border-color', '');

    }

    if ($('#account_password').val() == '') {

        $('#account_password').css('border-color', 'red');

    }
    else {

        $('#account_password').css('border-color', '');

    }

};

function postform() {

    if ($('#poster_name').val() == '') {

        $('#poster_name').css('border-color', 'red');

    }
    else {

        $('#poster_name').css('border-color', '');

    }

    if ($('#poster_text').val() == '') {

        $('#poster_text').css('border-color', 'red');

    }
    else {

        $('#poster_text').css('border-color', '');

    }

};

function logwithoutform() {


    if ($('#poster_text').val() == '') {

        $('#poster_text').css('border-color', 'red');

    }
    else {

        $('#poster_text').css('border-color', '');

    }

};

继承控制器代码，但这不应该太重要：

[HttpPost]
public ActionResult AccountCreated(Models.AccountViewModel model)
{

    String Account_Name = model.Account_Name;
    String Account_Password = model.Password;


    if (!ModelState.IsValid)
    {
        return RedirectToAction("CreateAccount");
    }

    //if (Account_Name == null || Account_Password == null)
    //    return RedirectToAction("CreateAccount");

    WebForumEntities2 db = new WebForumEntities2();

    foreach(Account eachAccount in db.Accounts)
    {
        if (eachAccount.Account_Name.Equals(Account_Name))
        {
            return RedirectToAction("AccountCreatedMessage");
        }
    }

    int nextiD = 0;
    if (db.Accounts.ToList().Count > 0)
    {
        nextiD = db.Accounts.ToList().Last().Id + 1;
    }

    var newAccount = new Account();

    newAccount.Account_Name = Account_Name;
    newAccount.Password = Account_Password;
    newAccount.Id = nextiD;

    db.Accounts.Add(newAccount);
    db.SaveChanges();

    return RedirectToAction("CreateAccount");

}

请帮我把文字框变成红色。

我尝试过调试，javascript函数永远不会被调用。

Answer 1

首先，我将使用数据属性进行字段验证。

public class AccountViewModel
{
  [Required] // data attribute
  public string Account_Name;

  [Required]
  public string Password;
}

然后您可以正常提交表单。如果ASP.NET引擎选择了任何数据验证错误，它会将类.field-validation-error放在您的输入上。

您可以根据自己的喜好设置此课程的样式：

.field-validation-error
{
  border-color: red;
}

其他几点说明：

你有一个嵌套在另一个表单中的表单，我会删除表单在你的按钮周围。
不确定为什么要将输入放入字符串中在您的控制器中，而不是使用您的ViewModel。
我通常将我的DbContext放在ActionResults之外，请务必将其丢弃。

文本框不会变红

1 个答案: