Hide Tooltip for HTML5 validation defined in ASP.NET/MVC

Question

When the input does not match the pattern specified by the pattern attribute, the browser displays "You must use this format:" in a tooltip on the field.

I cannot hide this tooltip message at all, can I? 'Cause even when I write

@Html.TextBoxFor(model => model.tbMyNumber, new { @pattern = "[0-9]{6,}", title="" })

it stills brings "You must use this format:" in the tooltip for this field. How can I avoid this?

If you don't want any message you can just remove the pattern attribute. If you tried hiding it, it would be confusing to users who are wondering why they cannot submit the form. That being said... what exactly do you want to happen when the user tries to submit the form with something that doesn't match your pattern? — Smern
– Smern, Commented Jul 26, 2016 at 13:39
The field is already marked red (light red background, dark red border) with css if input is invalid. The standard validation message is hidden as well. Just the tooltip won't disappear and I don't see why. — JonSnow
– JonSnow, Commented Jul 26, 2016 at 13:47

Smern · Accepted Answer · 2016-07-26 20:54:46Z

1

I don't think there is a way to do what you want without adding javascript. A simple alternative would be to verify with javascript (example below shown using jQuery) instead...

$('#myform').submit(function() {
  if(!/^[0-9]{6,}$/.test($('#mytext').val())) {
    return false;
  }
});

This would prevent the form from submitting if the value doesn't match the pattern... without displaying the tooltip... just make sure you have an alternative so the user doesn't wonder why they can't submit the form.

answered Jul 26, 2016 at 20:54

Smern

19.1k22 gold badges77 silver badges93 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jonathan Parent Lévesque · Accepted Answer · 2016-07-26 13:25:37Z

0

I guess that is not what you expect as answer, but you can probably work the problem around with javascript

HTML: * The string must be at least 6 digits

<br/>

<input type="text" onkeyup="isNumber(this)" onblur="lengthValidation(this)">

Javascript:

function isNumber(textbox)
{
  textbox.value = textbox.value.replace(/[\D]+/, ''); 
}

function lengthValidation(textbox)
{
    if (textbox.value.length < 6) {

    document.getElementById("error").style.display = 'block';

  } else {

    document.getElementById("error").style.display = 'none';
  }
}

Test it here: https://jsfiddle.net/mvxeous4/1/

answered Jul 26, 2016 at 13:25

Jonathan Parent Lévesque

1,9601 gold badge27 silver badges37 bronze badges

1 Comment

JonSnow Over a year ago

yes, this sample works, but as I want to solve it with HTML5 pattern and validation it's currently not a solution for the problem described.

Collectives™ on Stack Overflow

Hide Tooltip for HTML5 validation defined in ASP.NET/MVC

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related