Safari is not showing the validation message on calling reportValidity - javascript

I'm validating the form using a button click(not on form submit). The button is inside the form. Below is the code
HTML
<form id="form">
<input type="text" name="name" id="name" required />
<Button id="validate-button" onclick="check()">Validate</Button>
</form>
JavaScript
function check(e){
document.getElementById('form').reportValidity();
}
While this works as expected in chrome where the form is validated and I can see a popover on the name input field with message: Please fill in this field.
However in safari this is not the case. I can see that the invalid input gets in focus but the validation popover message is missing in safari browser.
JSFiddle: https://jsfiddle.net/cj6xynu1/
Note: Please check above jsfiddle link on safari

It turn out that the issue is because of the missing type attribute on the button. After adding type="button" the validation message started showing up in safari.
Working jsFiddle: https://jsfiddle.net/cj6xynu1/1/
Note: Check the above link in safari

Related

html5 validation not showing after submit

im struggling to find out why tooltip/message bubble from html5 validation is not showed "on" checkbox when I press submit button but it is shown when I hover mouse over it? It seems to happen on Chrome/Edge. On Firefox works fine.
In code I used ngNativeValidate attribute:
<form ngNativeValidate autocomplete="off" (ngSubmit)="click_MoveToNextView()" #form="ngForm">
Input:
<input type="checkbox" required>
Submit:
<input type='submit'></input>
Code with similar issue ():
jsfiddle
Please anyone?

How to disable the popup that appears for input validation ("Please fill out this field")?

I am using Angular 2 and I have a form with input as follows (simplified for readability's sake):
<input class="body-text1" type="text" [(ngModel)]="model.name" name="name" required minlength="1">
<!--more, similar inputs -->
I have my own angular validation, but the first input field gets a popup that is relevant to the input. For example, a plain text required input will receive a popup that says "Please fill out this field." while an input marked with type=email will say something like "Invalid email, must have #" (I forget the exact email popup text).
As far as I can tell, I did not add these popups in. I have tried adding formnovalidate / novalidate as attributes to the inputs based on a question that looked similar but it did not help.
You might need to add novalidate attribute to your form to prevent Browser default behaviour.
<form novalidate>
This popup shows because the required attribute is on the element. If you remove this, the popup will be gone, so will the validation be though.

Chrome doesn't remember input field value

I'm using HTML code like this:
<form method="post" action="#">
<input type="text" name="inputFIeld" id="someVal" value="" />
<button id="submitFun" type="submit">Dodaj</button>
</form>
The only thing I do is preventDefault on submit button click and then I make an ajax call to the server.
It works just fine on all browsers except chrome. Autocomplete on chrome just doesn't work.
I find a link on chrome site :
Chrome : You should have to activate autocomplete :
https://support.google.com/chrome/answer/142893?hl=en

Why Form Elements should not be named submit?

I figured out through debugging that I should not name any Form Elements name="submit", but even after searching I didn't find any good explanation of why?
See simple code example below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form action="javascript:alert('submitted');" method="post" id="test-form">
<label>Name</label>
<input type="text" name="name-field" value="" />
<input type="submit" name="submit" value="Submit Button" /> <!-- name should not be "submit" -->
<p>Submit Link</p>
</form>
</body>
</html>
If you Press Enter while on any Form Element or Click the
Submit Button, it will work.
If you Click on the Submit Link, it will have error
Unhandled Error: 'document.getElementById('test-form').submit' is not a function
If you simply rename your Submit Button to anything other than name="submit" (even if you just capitalize some part of it) or just remove the name="submit" attribute, then both the Submit Button and Submit Link will work.
I tried this in the latest version of Internet Explorer, Firefox, Opera, Chrome, and Safari. All of them have consistent behavior with regards to this.
As you can see in my code example, there is no involvement of jQuery or any other JavaScript library.
I would appreciate the explanation. Thanks
If you check the Mozilla docs here : https://developer.mozilla.org/en-US/docs/DOM/HTMLFormElement
You will see that forms have a .submit() method.
In addition, forms are also populated with the fields within the form.
(Here is one example:
http://www.devbay.com/articles/javascript/accessing-form-elements-array-with-javascript/
I can't find any reference that it should happen, only that it does.)
So, when you make an element called submit it over-rides the forms built-in submit() method -- and since the element is, well, not a function, you get that error message.
Say your form is named "foo" and you have a field "firstName".
foo.firstName is that field in the form.
foo.submit() will submit that form, because submit is a method on forms.
If you redefine submit to be a form field you overwrite the submit method.
submit would be the form input type and i think is also used as an identifier in javascript. So naming a submit button "submit" makes the use of "submit" in javascript ambiguous

Enter to reliably submit html form

I have a form with text input + gradient-shaded button with onclick='this.form.submit()' (plus some hidden inputs).
In all browsers, clicking on the button works.
In Firefox, if I click Enter while in text input, it submits the form.
In IE, it does nothing.
How can I make it work with IE?
If I remember correctly IE likes having an actual submit button, whether that's an <input type="submit" /> or <button type="submit">submit me</button>. Maybe you can put that in there but "out of sight" so you don't see it..
Create an empty text box, with a style of "visibility:hidden;display:none", this is a known issue
This type of form will always work with "Enter":
<form ...>
...
<input type="submit" ...>
</form>
Make sure you have an input of type submit.

Categories

Resources