Unwanted Autocomplete suggestions ASP.NET MVC-5 Razor

Question

Its shows some unwanted autocomplete suggestions.
I think those suggestions coming from UserName text field.
But I do not find any reason for those suggestions.

Model Code:

    [DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]
    [Required(ErrorMessage = "Birth Date is Reqired")]
    [DataType(DataType.DateTime)]
    [Display(Name = "Birth Date")]
    public DateTime BirthDate { get; set; }

Razor View:

<div class="container jumbotron" style="background-color:whitesmoke">
<div class="row">
    <div class="col-md-4" style="margin-left: 400px; margin-top:30px">
        <section id="loginForm">
            @Html.ValidationSummary(true)
            @using (Html.BeginForm("Registration", "SignUp", FormMethod.Post, new { enctype = "multipart/form-data" }))
            {
                <div class="form-group">
                    @Html.LabelFor(m => m.FirstName)
                    @Html.TextBoxFor(m => m.FirstName, new {@class = "form-control"})
                    @Html.ValidationMessageFor(m => m.FirstName)
                </div>

                <div class="form-group">
                    @Html.LabelFor(m => m.LastName)
                    @Html.TextBoxFor(m => m.LastName, new {@class = "form-control"})
                    @Html.ValidationMessageFor(m => m.LastName)
                </div>

                <div class="form-group">
                    @Html.LabelFor(m => m.UserName)
                    @Html.TextBoxFor(m => m.UserName, new {@class = "form-control"})
                    @Html.ValidationMessageFor(m => m.UserName)
                </div>

                <div class="form-group">
                    @Html.LabelFor(m => m.EmailAddress)
                    @Html.TextBoxFor(m => m.EmailAddress, new {@class = "form-control"})
                    @Html.ValidationMessageFor(m => m.EmailAddress)
                </div>
                <div class="form-group">
                    @Html.LabelFor(m => m.BirthDate)
                    <input class="form-control" value="yyyy-MM-dd" name="BirthDate" type="text" id="BirthDate" autocomplete="off">
                    @Html.ValidationMessageFor(m => m.BirthDate)
                </div>

                <div class="form-group">
                    @Html.LabelFor(m => m.PassWord)
                    @Html.PasswordFor(m => m.PassWord, new {@class = "form-control"})
                    @Html.ValidationMessageFor(m => m.PassWord)
                </div>

                <div class="form-group">
                    @Html.LabelFor(m => m.VerifyPassWord)
                    @Html.PasswordFor(m => m.VerifyPassWord, new {@class = "form-control"})
                    @Html.ValidationMessageFor(m => m.VerifyPassWord)
                </div>

                <div class="form-group">
                    @Html.LabelFor(m => m.VersityId)
                    @Html.TextBoxFor(m => m.VersityId, new {@class = "form-control"})
                    @Html.ValidationMessageFor(m => m.VersityId)
                </div>

                <div class="form-group">
                    @Html.LabelFor(m => m.PhoneNumber)
                    @Html.TextBoxFor(m => m.PhoneNumber, new {@class = "form-control"})
                    @Html.ValidationMessageFor(m => m.PhoneNumber)
                </div>

                <div class="form-group">
                    @Html.LabelFor(m => m.Address)
                    @Html.TextAreaFor(m => m.Address, new {@class = "form-control"})
                    @Html.ValidationMessageFor(m => m.Address)
                </div>

                <div class="form-group">
                    <input id="ImageUpload" type="file" name="ImageUpload" />
                </div>

                <button type="submit" class="btn btn-primary">Save</button>
            }
            <p>
                @Html.ActionLink("Already Have an Account", "LogIn")
            </p>
        </section>
    </div>
</div>

Problem view (Image) :
Problem indicate by red circle

I don't want this kinds of suggestions.
Please help me for get ride of this problem.

_{Thanks a lot advance}

https://stackoverflow.com/questions/18531437/stop-google-chrome-auto-fill-the-input — adiga, Aug 27 '17 at 06:15

score 0 · Accepted Answer · edited Aug 27 '17 at 08:18

0

From this site, maybe this is your issue, the autocomplete should do the trick, but if your whole page is rendering over XHTML, then you will need something like this.

https://css-tricks.com/snippets/html/autocomplete-off/

.autocomplete=”off” is not valid markup with XHTML Transitional, which is a common DOCTYPE. Use this to keep a vaild markup

if (document.getElementsByTagName) {

    var inputElements = document.getElementsByTagName(“input”);

    for (i=0; inputElements[i]; i++) {

        if (inputElements[i].className && (inputElements[i].className.indexOf(“disableAutoComplete”) != -1)) {
            inputElements[i].setAttribute(“autocomplete”,”off”);
        }
    }
}

edited Aug 27 '17 at 08:18

adiga

34,372
9
61
83

answered Aug 26 '17 at 05:03

thepanch

353
2
13

How I can apply this logic here? – Md. Razibul Hasan Mithu Aug 26 '17 at 06:02
verify in your partial view if you are using the xhtml mark up in the beginning – thepanch Aug 28 '17 at 17:45

Unwanted Autocomplete suggestions ASP.NET MVC-5 Razor

1 Answers1