I'm trying to set a custom error message in an HTML5 form with the required attribute, however it doesn't appear to be working.
Code:
<form role="form" method="post" action="contact-form.php">
<input type="text" class="input-field" name="name" id="name" placeholder="Name" required />
<input type="email" class="input-field" name="email" id="email" placeholder="Email" required />
<textarea name="message" class="textarea-field" id="message" placeholder="Message"></textarea>
<input type="submit" value="Contact Me" class="btn btn-primary btn-xl" />
</form>
<script>
var name = document.querySelector( "#name" );
function setErrorMessage() {
if ( name.validity.valueMissing ) {
name.setCustomValidity( "Please enter your name" );
}
};
setErrorMessage();
name.addEventListener( "change", setErrorMessage );
</script>
Fiddle: http://jsfiddle.net/e4eutova/1/
I've looked round and I thought the syntax was correct, but it doesn't appear to be. Any help would be greatly appreciated!
Nevermind--I found and am using this solution: https://github.com/javanto/civem.js
As far as I know and understand the problem, you aren't calling the function setErrorMessage() anywhere. You need to add onClick="setErrorMessage() in your submit button input description.
Also, I would try changing the code to use document.getElementById("_your_object_id_"); instead. Or getElementsByName().
Related
I've been able to change the error message when the user has not typed their email in yet, but how do I change the error message when the user types in their email with the wrong format?
This is my code written in Bootstrap 4 style:
<div class="form-group">
<label>Email</label>
<input type="email" name="email" required="" class="form-control" oninvalid="this.setCustomValidity('Please Enter valid email')" oninput="setCustomValidity('')">
</div>
You simply can fix this with adding title to input tag
<input type="email" class="form-control" name="email" id="freeform_email"
placeholder="Enter an email" required="required"
oninvalid="this.setCustomValidity('Enter an email that contains "#". Example: info#roshni.nl')" title="Email: the email contains '#'. Example: info#ros-bv.nl" />
Yours should be then:
<div class="form-group">
<label>Email</label>
<input type="email" name="email" required="" class="form-control" oninvalid="this.setCustomValidity('Please Enter valid email')" oninput="this.setCustomValidity('')" title='<your text>'">
</div>
You're welcome.
Here’s an example of how to do it:
<!DOCTYPE html>
<html>
<head>
<script>
function validateForm() {
var x = document.forms["myForm"]["email"].value;
var atpos = x.indexOf("#");
var dotpos = x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length) {
alert("Not a valid e-mail address");
return false;
}
}
</script>
</head>
<body>
<form name="myForm" action="/action_page.php" onsubmit="return validateForm();" method="post">
Email: <input type="text" name="email">
<input type="submit" value="Submit">
</form>
</body>
</html>
You’ll have to change the text inside alert to include your custom message and action_page.php to include your own and add your desired styles all over!
UPDATE
If you don't want to implement your own JavaScript functions then you can just go ahead and add conditions to the oninvalid as follows:
<input type="email" name="email" required="" class="form-control" oninvalid="if (this.value == ''){this.setCustomValidity('This field is required!')} if (this.value != ''){this.setCustomValidity('The email you entered is invalid!')}" oninput="setCustomValidity('')">
When visiting the "reset password" route of my single-page app and looking at the Chrome browser console, I am greeted with the follwing warning:
[DOM] Password forms should have (optionally hidden) username fields for accessibility: (More info: goo.gl/9p2vKq)
Helpfully, the html of the form in question is also printed to the console in the next line, and quite clearly contains a hidden username field:
<form data-ember-action data-ember-action-436="436">
<div class="form-group">
<label for="newpasswordone">Password</label>
<input type="password" autocomplete="new-password" placeholder="Enter your new password" id="ember437" class="form-control ember-text-field ember-view" data-op-id="0">
<label for="newpasswordtwo">Password (again)</label>
<input type="password" autocomplete="new-password" placeholder="Re-enter your new password" id="ember438" class="form-control ember-text-field ember-view" data-op-id="1">
<input type="hidden" name="username" autocomplete="username" value="a_b">
</div>
<button disabled type="submit" class="btn btn-default">Reset password</button>
</form>
I tried some minor variations -- unhiding the username field, marking it readonly, moving it outside the div -- without affecting the warning.
How does Chrome expect to be served the username?
Problem occurs with Chrome 63 and 64.
I had the same problem. After some digging, I found that it needs to be an input element with the type text. By "optionally hidden" they mean that you may hide it with CSS.
If you just add an input with the name email or username chrome gives you another warning saying that input elements should have autocomplete attributes. So this is what I came up with to fix these errors:
<input
type="text"
name="email"
value="..."
autocomplete="username email"
style="display: none;"
>
You will need to manually render the actual username or email into the elements value attribute.
Also, keep in mind that inline styles are not a very good practice.
Use the hidden attribute instead of type="hidden"
<input hidden type="text" autocomplete="username" value="{{...}}">
I had this same situation.
Everything seemed be ok but I still got this verbose.
On my case helped me a relocate this userName input from end of form to begin of that.
It was my code before my changes:
<form id="changePass">
<div class='modal-dialog'>
<input type="password" class="form-control" id = "changePasswordOldPassword" autocomplete="current-password"/>
<input type="password" class="form-control" id = "changePasswordNewPassword" autocomplete="new-password"/>
<input type="password" class="form-control" id = "changePasswordNewPassword2" autocomplete="new-password"/>
<div class="modal-footer">
<button type="button" id="change-password-ok-button">Ok</button>
<button type ="button" data-dismiss="modal">Close</button>
</div>
</div>
<input id="userName" name="username" autocomplete="username" value="">
</form>
And this is current code:
<form id="changePass">
<input id="userName" name="username" autocomplete="username" value="">
<div class='modal-dialog'>
<input type="password" class="form-control" id = "changePasswordOldPassword" autocomplete="current-password"/>
<input type="password" class="form-control" id = "changePasswordNewPassword" autocomplete="new-password"/>
<input type="password" class="form-control" id = "changePasswordNewPassword2" autocomplete="new-password"/>
<div class="modal-footer">
<button type="button" id="change-password-ok-button">Ok</button>
<button type ="button" data-dismiss="modal">Close</button>
</div>
</div>
</form>
you must put the input tag inside another tag for example:
<form action="">
<div>
<input type="text" autocomplete="username">
</div>
<div>
<input type="password" autocomplete="password">
</div>
<div>
<input type="password" autocomplete="password">
</div>
I had this same situation in VueJs when i use rendering conditional v-if v-else and i try put input tag inside new tag and it's work for me
Though I know that this question is quite old but thought maybe it may be useful for someone .I also faced the same issue with my React app update user password and this worked for me just above the password fields without label.Excuse me for writing the React way .
<input hidden type='text' name='email' autoComplete='email' />
Basic usage :-
<form>
<input hidden type='text' name='email' autoComplete='email' />
<label htmlFor="oldPass">Enter your current password</label>
<input id="oldPass" type="password" />
<label htmlFor="newPass">Enter your new password</label>
<input id="newPass" type="password" />
</form>
After reading Jonas comment I rebuilt the project and the warning went away
I had the same warning showing in the console and this is how I fixed it:
<input hidden autocomplete="username" name="username" type="text" value="{{..}}"/>
<input hidden autocomplete="email" name="email" type="text" value="{{..}}"/>
I have this HTML code
<form method="post" action="cashier.php" enctype="form-data/multipart">
<input required id="amount" type="number" min="0" class="form-control" name="txtamount" placeholder="Enter Payment Here..." />
<input required id="cash" type="number" min="document.getElementById('amount').value" class="form-control" name="txtcash" placeholder="Enter Cash Here..." />
<input type="submit" class="btn btn-primary pull-right" name="btnenroll" value="Done" />
</form>
If I type 1000 on id="amount", the id="cash" min will be 1000.
But it doesn't work.
The most straightforward way is to add an onchange handler to the payment input, such as:
<form method="post" action="cashier.php" enctype="form-data/multipart">
<input required id="amount" type="number" min="0" class="form-control" name="txtamount" placeholder="Enter Payment Here..."
onchange="document.getElementById('cash').min=this.value;"/>
<input required id="cash" type="number" min="document.getElementById('amount').value" class="form-control" name="txtcash" placeholder="Enter Cash Here..." />
<input type="submit" class="btn btn-primary pull-right" name="btnenroll" value="Done" />
</form>
This gets you the functionality you are looking for without needing to include a third party library like jQuery.
In this case you should use Jquery onchange or keypress
$("#cash").attr({
"min" : $("#amount").val()
});
If you are using jQuery, use the below,
$("#amount").change(function() {
$("#cash").attr('min',$("#amount").val());
});
Refer - https://api.jquery.com/change/
I don't think you can put javascript in min, and also you have a pair of double quote in another pair of double quote, which will break the the tag (You can inspect element and you will figure out.)
So the idea is when the value of amount element change, we change cash's min value. So we can add a event listener to amount element. Whenever it is changed, set the min for cash element. Here is a working sample code:
<form method="post" action="cashier.php" enctype="form-data/multipart">
<input required id="amount" type="number" class="form-control" name="txtamount" placeholder="Enter Payment Here..." />
<input required id="cash" type="number" class="form-control" name="txtcash" placeholder="Enter Cash Here..." />
</form>
<script>
function setMin() {
var amount = document.getElementById("amount");
var cash = document.getElementById("cash");
cash.min = amount.value;
}
var trigger = document.getElementById("amount");
trigger.addEventListener("change", setMin, false);
</script>
As you can see, I removed your js in html and add a event listener. Hope this will help.
<form class="form-asd" role="form">
<h2 class="form-signin-heading">login</h2><hr />
<label class="control-label" for="username">Username</label>
<input class="form-control" type="email" required="" placeholder="username"data-error="enter username"></input>
<label class="control-label" for="username">password</label>
<input class="form-control" type="password" required=" " placeholder="Password"></input>
<label class="checkbox"></label>
<button class="btn btn-lg btn-primary " type="submit">submit</button>
</form>
how can we change this default message of popover of the require field "Please fill out this field "to "please enter username"
You can use setCustomValidity function when oninvalid event occurs.
Like below:-
<input class="form-control" type="email" required=""
placeholder="username" oninvalid="this.setCustomValidity('Please Enter valid email')">
</input>
Update:-
To clear the message once you start entering use oninput="setCustomValidity('') attribute to clear the message.
<input class="form-control" type="email" required="" placeholder="username"
oninvalid="this.setCustomValidity('Please Enter valid email')"
oninput="setCustomValidity('')"></input>
Combination of Mritunjay and Bartu's answers are full answer to this question. I copying the full example.
<input class="form-control" type="email" required="" placeholder="username"
oninvalid="this.setCustomValidity('Please Enter valid email')"
oninput="setCustomValidity('')"></input>
Here,
this.setCustomValidity('Please Enter valid email')" - Display the custom message on invalidated of the field
oninput="setCustomValidity('')" - Remove the invalidate message on validated filed.
And for all input and select:
$("input[required], select[required]").attr("oninvalid", "this.setCustomValidity('Required!')");
$("input[required], select[required]").attr("oninput", "setCustomValidity('')");
I wanted to change the text of the textarea. This method helped
<form action="/action_page.php" method="post">
<input type="text" required placeholder="username" oninvalid="this.setCustomValidity('Error validate')" oninput="setCustomValidity('')">
<br><br>
<textarea placeholder="Ko’cha, uy, xonadon" name="address" required oninvalid="this.setCustomValidity('Majburiy maydon')" oninput="setCustomValidity('')"></textarea>
<input type="submit" value="Submit">
</form>
$("input[required]").attr("oninvalid", "this.setCustomValidity('Say Somthing!')");
this work if you move to previous or next field by mouse, but by enter key, this is not work !!!
<b>Gebruikersnaam:</b><br>
<input id="textbox" type="text" value="" size="25" required>
<a id="googleLink" href="##klik nu om member te kopen##"
onclick="this.href='https://websitelink.com?naam=' + encodeURIComponent(document.getElementById('textbox').value);">
<button>Koop: MEMBER</button>
</a>
I want: <input id="textbox" type="text" value="" size="25" required>
to be required when i click: <button>Koop: MEMBER</button>
like: if <input id="textbox" type="text" value="" size="25" required> value=""
its shows an alert like: "No username entered"
Fixed, Thx Lepanto
You need to cleanup your code first. not sure why you're using <a>. Anyway It would be pretty good to validate using onblur()
HTML code:
<input id="textbox" type="text" value="" size="25" required onblur="validateTextBox()">
JavaScript:
function validateTextBox() {
if (document.getElementById("textbox").value != "") {} else {
alert("Please enter a value");
}
}
Check this out in JSFiddle.
Of course, there is no such thing as required attribute in HTML tag textarea.
You have to create your own validation methods using Javascript. One of them is Validation plugin (which requires jQuery).
You have to write a JavaScript function to validation the textbox. Something like below
<script>
function doclick(){
if(document.getElementById('textbox').value != ''){
this.href='https://websitelink.com?naam=' + encodeURIComponent(document.getElementById('textbox').value);
}
else{
alert('No username entered');
}
}
</script>
And call this function in your HTML tag onclick
<b>Gebruikersnaam:</b><br>
<input id="textbox" type="text" value="" size="25" required>
<a id="googleLink" href="##klik nu om member te kopen##" onclick="doclick()">
<button>Koop: MEMBER</button>
</a>