Asked  7 Months ago    Answers:  5   Viewed   36 times

When using the xhtml1-transitional.dtd doctype, collecting a credit card number with the following HTML

<input type="text" id="cardNumber" name="cardNumber" autocomplete='off'/>

will flag a warning on the W3C validator:

there is no attribute "autocomplete".

Is there a W3C / standards way to disable browser auto-complete on sensitive fields in a form?

 Answers

71

Here is a good article from the MDC which explains the problems (and solutions) to form autocompletion. Microsoft has published something similar here, as well.

To be honest, if this is something important to your users, 'breaking' standards in this way seems appropriate. For example, Amazon uses the 'autocomplete' attribute quite a bit, and it seems to work well.

If you want to remove the warning entirely, you can use JavaScript to apply the attribute to browsers that support it (IE and Firefox are the important browsers) using someForm.setAttribute( "autocomplete", "off" ); someFormElm.setAttribute( "autocomplete", "off" );

Finally, if your site is using HTTPS, IE automatically turns off autocompletion (as do some other browsers, as far as I know).

Update

As this answer still gets quite a few upvotes, I just wanted to point out that in HTML5, you can use the 'autocomplete' attribute on your form element. See the documentation on W3C for it.

Tuesday, June 1, 2021
 
osondoar
answered 7 Months ago
30

Either:

  1. Add a heading (h1, ..., h6) tag to your section element.
  2. Replace your section element with a div element.
  3. Ignore the warning. The message you're seeing is a non-normative usage recommendation, as per the HTML5 spec (highlighting mine):

    The theme of each section should be identified, typically by including a heading (h1-h6 element) as a child of the section element.

Friday, June 18, 2021
 
tdous
answered 6 Months ago
94

I was planning to create a ErrorMessages class that contains a list where I can put all errorMessages. Every time an invalid input is given, a new message is added to the errorMessages list. So if user click's 'create' button, all messages in the list are shown. Is this a good way of handling things?

Subjectively, I think it would be better to provide instant feedback that the value the user entered is invalid. That way, they can immediately go back and fix it.

I mean, think about it. The approach you propose would literally give them a giant list of problems at the end, which is not very user-friendly. Besides, how are they going to remember all of those problems to be able to go back and fix them one at a time? (Hint: they're not.)

Instead, I recommend using the ErrorProvider class to display any errors right next to the appropriate control. I talked a little bit more about this approach in my answer here and here.

Of course, you'll still need to make sure upon final submission (clicking the OK/Submit button) that all the input is valid, but then that's just a simple case of checking for the presence of any errors.

I could easily do this in the Form class. But I remember some best practice way of validating the input in the set properties.

Yes, the idea here is encapsulation. The Form class should only know about form stuff. It shouldn't be required to know what kind of input is/is not valid for all of your different controls.

Instead, this validation logic should be placed elsewhere, such as in a class that stores your data. That class would expose public properties to get and set the data, and inside of the setter method, it would verify the data.

That means that all your Form has to do is call a setter method on your data class. The Form needs to know nothing about how to validate the data, or even what the data means, because the data class handles all of that.

That should not happen, no instance of the class may be created unless input is valid.

If this is indeed the case, you will need to provide a constructor for the class that accepts as parameters all of the data it needs. The body of the constructor will then validate the specified data and throw an exception if any of it is invalid. The exception will prevent the class from being created, ensuring that no instance of a class that contains invalid data ever exists.

Such a class would probably not have setter methods at all—only getters.

However, this is kind of an unusual requirement in the world of C# (however common it may be in C++). Generally, placing your validation code inside of the setters works just fine.

My properties have some private setters. So they only get set in the constructor of my data class. Problem is now that this seems to make my validation not eassy

Why would that change anything? You still handle the validation inside of the private setters. If validation fails, you throw an exception. Because the constructor doesn't handle the exception, it continues bubbling up out of that method to the code that attempted to instantiate the object. If that code wants to handle the exception (e.g., to display an error message to the user), it can do so.

Granted, throwing an exception in the case of invalid input is not necessarily a "best practice". The reason is that exceptions should generally be reserved for unexpected conditions, and users screwing up and providing you with invalid data is, well, to be expected. However:

  1. This is the only option you have for data validation inside of a constructor, because constructors can't return values.
  2. The cost of exception handling is basically negligible in UI code since modern computers can process exceptions faster than users can perceive on-screen changes.
Thursday, September 16, 2021
 
elias
answered 3 Months ago
60

They would ideally support the use of data-* attributes, e.g., data-v-on:click, but it seems they don’t.

See their issue Why not using HTML5 data-* attributes.

It seems that it was possible to overwrite the used prefix, but this option seems to have been removed.

Sunday, October 31, 2021
 
EastSw
answered 1 Month ago
94

I think the answer is "no". I suggest to create your own "popupAlert" using some packages like Rg.Plugins.Popup

// Use these methods in PopupNavigation globally or Navigation in your pages

// Open new PopupPage
Task PushAsync(PopupPage page, bool animate = true) // Navigation.PushPopupAsync

// Hide last PopupPage
Task PopAsync(bool animate = true) // Navigation.PopPopupAsync

// Hide all PopupPage with animations
Task PopAllAsync(bool animate = true) // Navigation.PopAllPopupAsync

// Remove one popup page in stack
Task RemovePageAsync(PopupPage page, bool animate = true) // Navigation.RemovePopupPageAsync
<?xml version="1.0" encoding="utf-8" ?>
<pages:PopupPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:pages="clr-namespace:Rg.Plugins.Popup.Pages;assembly=Rg.Plugins.Popup"
             xmlns:animations="clr-namespace:Rg.Plugins.Popup.Animations;assembly=Rg.Plugins.Popup"
             x:Class="Demo.Pages.MyPopupPage">
  <!--Animations use example-->
  <pages:PopupPage.Animation>
    <animations:ScaleAnimation 
      PositionIn="Center"
      PositionOut="Center"
      ScaleIn="1.2"
      ScaleOut="0.8"
      DurationIn="400"
      DurationOut="300"
      EasingIn="SinOut"
      EasingOut="SinIn"
      HasBackgroundAnimation="True"/>
  </pages:PopupPage.Animation>
  <!-- Content -->
</pages:PopupPage>
public partial class MyPopupPage : PopupPage
    {
        public MyPopupPage()
        {
            InitializeComponent();
        }

        protected override void OnAppearing()
        {
            base.OnAppearing();
        }

        protected override void OnDisappearing()
        {
            base.OnDisappearing();
        }

        // Method for animation child in PopupPage
        // Invoced after custom animation end
        protected override Task OnAppearingAnimationEnd()
        {
            return Content.FadeTo(0.5);
        }

        // Method for animation child in PopupPage
        // Invoked before custom animation begin
        protected override Task OnDisappearingAnimationBegin()
        {
            return Content.FadeTo(1);
        }

        protected override bool OnBackButtonPressed()
        {
            // Prevent hide popup
            //return base.OnBackButtonPressed();
            return true; 
        }

        // Invoced when background is clicked
        protected override bool OnBackgroundClicked()
        {
            // Return default value - CloseWhenBackgroundIsClicked
            return base.OnBackgroundClicked();
        }
    }

    // Main Page

    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }

        // Button Click
        private async void OnOpenPupup(object sender, EventArgs e)
        {
            var page = new MyPopupPage();

            await Navigation.PushPopupAsync(page);
            // or
            await PopupNavigation.PushAsync(page);
        }
    }
Monday, November 22, 2021
 
ioleo
answered 2 Weeks ago
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :
 
Share