CODEWITHSUNDEEP
javascriptasp.net-mvc
user3046358
user3046358

Reputation: 35

Textboxes won't turn red

cshtml code for one of the textboxes. I'm trying to trigger a function on form submit that checks whether there's anything typed in the textboxes. If there isn't anything typed in the textboxes, the border should turn red.

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

Heres the javascript file. The function should be triggered on ="onsubmit". I've tried various forms of .onsubmit, but they've haven't worked.

//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', '');

    }

};

And heres the controller code but that shouldn't be too important:

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

}

Please help me make the textboxes turn red.

Upvotes: 0

Views: 66

Answers (1)

David Lee
David Lee

Reputation: 2100

First I would use data attributes for field validation.

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

  [Required]
  public string Password;
}

You can then submit your form normally. If the ASP.NET engine picks up any data validation errors it will put the class .field-validation-error on your inputs.

You can style this class to your liking, like so:

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

A few other notes:

  • You have a form nested in another form, I would remove the form around your button.
  • Not sure why you put your inputs into a string in your controller instead of using your ViewModel.
  • I typically put my DbContext outside of my ActionResults, be sure to dispose of it.

Upvotes: 2

Related Questions