其中一个文本框的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文件。该函数应在=“ onsubmit”上触发。我已经尝试过各种形式的.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函数。
最佳答案
首先，我将使用数据属性进行字段验证。
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之外，请确保将其丢弃。
关于javascript - 文字框不会变成红色，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48272561/