Bootstrap MVC 4 TextBoxFor Required indicator

Question

I am totally confused. I have 6 inputs on a page for a signup page. Three of the boxes have the required indicator in the right side of the box the other three do not. All 6 fields are required in code.

I have looked through the code and either MVC is adding a background image or Bootstrap is. Here is the Razor code I am using.

 <div class="row ">
            <div class="col-md-6">
                <div class="row">
                    @Html.TextBoxFor(m => m.currentUser.UserName, new { @class = "form-control", placeholder = "user name", tabindex = 1 })

                </div>

                <div class="row">
                    @Html.PasswordFor(m => m.currentUser.Password, new { @class = "form-control", placeholder = "password", tabindex = 3 })

                </div>
                <div class="row">
                    @Html.TextBoxFor(m => m.currentUser.LastName, new { @class = "form-control", placeholder = "last name", tabindex = 6 })

                </div>
            </div>
            <div class="col-md-6">
                <div class="row">
                    @Html.TextBoxFor(m => m.currentUser.EmailAddress, new { @class = "form-control", placeholder = "email address", tabindex = 2 })
                </div>
                <div class="row">
                    @Html.PasswordFor(m => m.confrimPassword, new { @class = "form-control", placeholder = "confirm password", tabindex = 4 })

                </div>
                <div class="row">
                    @Html.TextBoxFor(m => m.currentUser.FirstName, new { @class = "form-control", placeholder = "first name", tabindex = 5 })

                </div>
            </div>
        </div>

I dont have much experience with Bootstrap so I am not sure if that is what is causing the issue or if MVC is.

Any help is appreciated.

Here is the model class:

 public class User
{
    public int ID { get; set; }

    [Required(ErrorMessage = "Please enter a User Name.")]
    public string UserName { get; set; }

    [Required(ErrorMessage = "Please enter a password")]
    public string Password { get; set; }

    [Required(ErrorMessage = "Please enter your first name.")]
    public string FirstName { get; set; }

    [Required(ErrorMessage = "Please enter your last name.")]
    public string LastName { get; set; }

    [Required(ErrorMessage = "Please enter an email address.")]
    public string EmailAddress { get; set; }
}

here is the generated code for an input that has the indicator:

<input class="form-control" data-val="true" data-val-required="Please enter a password" id="currentUser_Password" name="currentUser.Password" placeholder="password" tabindex="3" type="password" autocomplete="off" keyev="true" clickev="true" style="background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAASCAYAAABSO15qAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QsPDhss3LcOZQAAAU5JREFUOMvdkzFLA0EQhd/bO7iIYmklaCUopLAQA6KNaawt9BeIgnUwLHPJRchfEBR7CyGWgiDY2SlIQBT/gDaCoGDudiy8SLwkBiwz1c7y+GZ25i0wnFEqlSZFZKGdi8iiiOR7aU32QkR2c7ncPcljAARAkgckb8IwrGf1fg/oJ8lRAHkR2VDVmOQ8AKjqY1bMHgCGYXhFchnAg6omJGcBXEZRtNoXYK2dMsaMt1qtD9/3p40x5yS9tHICYF1Vn0mOxXH8Uq/Xb389wff9PQDbQRB0t/QNOiPZ1h4B2MoO0fxnYz8dOOcOVbWhqq8kJzzPa3RAXZIkawCenHMjJN/+GiIqlcoFgKKq3pEMAMwAuCa5VK1W3SAfbAIopum+cy5KzwXn3M5AI6XVYlVt1mq1U8/zTlS1CeC9j2+6o1wuz1lrVzpWXLDWTg3pz/0CQnd2Jos49xUAAAAASUVORK5CYII=); padding-right: 0px; background-attachment: scroll; cursor: auto; background-position: 100% 50%; background-repeat: no-repeat no-repeat;">

The really weird part is I discovered that they show up in Chrome but not Firefox.

Answer 1

@nemesv - you were exactly right. LastPass is one of the extensions I had installed in Chrome. Once I disabled it the icons were removed. Pulled my hair out for days trying to figure that one out.