How do I change "Please match the required format" with "Not valid"
I've Looked all over the Stackoverflow couldn't find anything that help it may be a duplicate but please help me!
If I type 'asd' in the field, then press GO, and then continue to type the message "Please match the required format" will appear
I don't want messy code, I want it to be in the html tags if possible!
<form id="banner-message">
<input value=""
name="email"
id="inputEmail"
class="form-control"
placeholder="email"
required=""
autofocus=""
oninvalid="this.setCustomValidity('Not Valid')" oninput="setCustomValidity('')"
pattern="[a-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,3}$">
<button class="btn btn-lg btn-block" type="submit">Go</button>
</form>
You need to use onchange and this.setCustomValidity
<form id="banner-message">
<input value=""
name="email"
id="inputEmail"
class="form-control"
placeholder="email"
required=""
autofocus=""
oninvalid="this.setCustomValidity('Not Valid')"
onchange="try{setCustomValidity('')}catch(e){}"
oninput="setCustomValidity(' ')"
pattern="[a-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,3}$">
<button class="btn btn-lg btn-block" type="submit">Go</button>
</form>
<form id="banner-message">
<input value=""
name="email"
id="inputEmail"
class="form-control"
placeholder="email"
required=""
autofocus=""
oninvalid="this.setCustomValidity('Not Valid')" oninput="setCustomValidity('')"
pattern="[a-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,3}$">
<button class="btn btn-lg btn-block" type="submit">Go</button>
</form>
You can also just set the title attribute:
<form id="banner-message">
<input value=""
placeholder="email"
required=""
title="Not Valid"
pattern="[a-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,3}$">
<button class="btn btn-lg btn-block" type="submit">Go</button>
</form>
Also pay attention to add oninput="this.setCustomValidity('')" to input tag. Because if you don't, you may get a situation where warning messages are mixed.(One input tag's warning message appears for another input tag)
The answer from Hyyan Abo Fakher kind of works, however it's buggy because we set the "customError" validity state by using setCustomValidity, this causes a lot of false positive validations.
Instead of using oninvalid, we should just use onChange and also check the Validity State for errors we are expecting and ignore customError. This code is for React:
<input
...
onChange={event => {
const target = event.target as HTMLInputElement;
if (target?.validity?.patternMismatch) {
target?.setCustomValidity(customInputError);
} else {
target?.setCustomValidity('');
}}
Here I am only setting my custom error message when I see the "patternMismatch" validity state. If you would like to check all states then check for all of them except target?.validity?.customError as it's a false positive (set by our setCustomValidity call).
Related
How do I write a function that overrides form validation when a user clicks the back button?
If the user doesn't fill the form and clicks submit, it tells shows " please fill in this field"
then I added a back button in case the user doesn't wanna fill the form and wants to go back
but onClick it shows "please fill in this field"
how do I override this when the user clicks back?
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Name must be filled out");
return false;
}
}
function goBack() {
window.history.back()
}
<div class="form-div">
<form name="myForm" action="action_page.php" onsubmit="return validateForm()" method="post" required>
<button onclick="goBack()">Go Back</button>
<div class="container">
<h1>Register</h1>
<p>Please fill in this form to create an account.</p>
<hr>
<label for="name"><b>FullName</b></label>
<i class="fa fa-user icon"></i>
<input type="text" placeholder="Enter Name" name="fullName" id="name" required>
<label for="email"><b>Email</b></label>
<i class="fa fa-envelope icon"></i>
<input type="text" placeholder="Enter Email" name="email" id="email" required>
<label for="psw"><b>Password</b></label>
<i class="fa fa-key icon"></i>
<input type="password" placeholder="Password" id="psw" name="psw" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters" required>
<label for="psw-repeat"><b>Repeat Password</b></label>
<i class="fa fa-key icon"></i>
<input type="password" placeholder="Repeat Password" name="psw-repeat" id="psw-repeat" required>
<p>By creating an account you agree to our Terms & Privacy.</p>
<button type="submit" class="registerbtn">Register</button>
</div>
<div class="container signin">
<p>Already have an account? Sign in.</p>
</div>
</form>
</div>
I think removing the "required" attribute from your form tag should be good even if you keep this "required" attribute on your inputs.
This thing happen because you added button inside <form> that causing it to act as a submit button
see this: How to prevent buttons from submitting forms
so basically you can return false, but its much easer to just remove the button outside the <form>
FYI
You should ALWAYS check the values of the inputs buy yourself because everyone who is familiar with the devTools can delete the required attribute and then send empty values to your server
Another FYI
You must check the values also in the server because there are many ways you can override the client checks (you do the client side check just for UX)
Have HTML (part):
<div class="modal-write-us">
<form class="modal-write-us-form" action="" method="post">
<label>
<input type="text" name="user-name" required>
</label>
<label>
<input type="text" name="e-mail" required>
</label>
<label for="text-field"></label>
<textarea name="text" rows="5" id="text-field" required></textarea>
</form>
<div class="modal-write-us-button">
<button class="btn btn-red" type="submit">Submit</button>
</div>
</div>
I need to add class "modal-error" for div.modal-write-us if submitted form have empty field/fields.
JS:
var modalWriteUs = document.querySelector('.modal-write-us');
var form = modalWriteUs.querySelector('form');
var userName = modalWriteUs.querySelector('[name=user-name]');
var eMail = modalWriteUs.querySelector('[name=e-mail]');
var textArea = modalWriteUs.querySelector('[name=text]');
form.addEventListener('submit', function(event) {
if (!userName.value || !eMail.value || !textArea.value) {
event.preventDefault();
modalWriteUs.classList.add('modal-error');
}
});
But class is not added. Where is my mistake?
First of all, you need to place your submit button into the form.
Then, change submit button to input:
<input class="btn btn-red" type="submit">Submit</input>
Now you need to make some fixes in your JS.Use double quotes in atttribute selectors:
querySelector('[name="user-name"]')
Attribute required doesn't allow to submit empty form, so your submit callback never runs.If you remove required attribute your code will work.
If you put <button class="btn btn-red" type="submit">Submit</button> inside the <form> it should work.
See working Plunker.
<div class="modal-write-us">
<form class="modal-write-us-form" action="" method="post">
<label>
<input type="text" name="user-name" required>
</label>
<label>
<input type="text" name="e-mail" required>
</label>
<label for="text-field"></label>
<textarea name="text" rows="5" id="text-field" required></textarea>
<div class="modal-write-us-button">
<button class="btn btn-red" type="submit">Submit</button>
</div>
</form>
</div>
EDIT: More explanation here:
The elements used to create controls generally appear inside a FORM element, but may also appear outside of a FORM element declaration when they are used to build user interfaces. This is discussed in the section on intrinsic events. Note that controls outside a form cannot be successful controls.
How go get an input text value in JavaScript?
I want to get input text value in jquery script but it prompted empty.
my script code:
<script type="text/javascript">
var emails;
function checkRegistration() {
emails = document.getElementById('my_email').value;
alert(emails);
}
</script>
my form code :
<form method="post" role="form" onSubmit="return checkRegistration()" action="#">
<div class="form-group">
<input type="email" class="form-control" id="my_email" name="email" placeholder="Enter a valid email address">
</div>
<div class="form-group">
<input type="submit" name="submit" class="btn btn-primary btn-block" value="Forgot Password" />
</div>
</form>
First check are you using jquery.min.js file or not.
Second if you want to get value using id. id should be unique on that page.
Try below
var my_email= $('#my_email').val();
Edit, Updated
Add required attribute to input type="email" element, to prevent form submission if value not entered by user
Use .onchange event
var emails = document.getElementById("my_email");
function checkRegistration() {
alert(this.value);
}
emails.onchange = checkRegistration;
<form method="post" role="form" action="#">
<div class="form-group">
<input type="email" class="form-control" id="my_email" name="email" placeholder="Enter a valid email address" required>
</div>
<div class="form-group">
<input type="submit" name="submit" class="btn btn-primary btn-block" value="Forgot Password" />
</div>
</form>
I am looking to validate a form and disable the submit based on no form errors. I am leveraging UI Utils. The email validation, password matching and password message works, just not the submit.
<div class="modal-body" ng-controller="registerFormController">
<div class="facebookButton">
<div class="lucida">Sign In With Facebook</div>
</div>
<form ng-submit="processForm()" name="registerForm" name="password" class="registerForm">
<input type="email" placeholder="Email" class="registerEmail block" ng-model="formData.email">
<input type="password" placeholder="password" required class="registerPassword block" ng-model="formData.password">
<input type="password" placeholder="password" name="password2" required ui-validate=" '$value==formData.password' " ui-validate-watch=" 'formData.password' "class="registerPassword2 block" ng-model="formData.password2">
<span ng-show="registerForm.password2.$error.validator">Passwords do not match!</span>
<button type="submit" class="create-account" ng-disabled="'!registerForm.$error.validator'">Create Account</button>
</form>
</div>
If a CodePen / PLNKR or any additional code is needed, I can definitely provide. Thanks a bunch in advance.
You need change your mark up to this:
<button type="submit" class="create-account" ng-disabled="registerForm.$invalid">Create Account</button>
You also need to remove this from the form tag:
name="password"
while i am pressing enter key its calls function which automatically refreshing the page. the function i wrote for cancel button
<form name="myForm">
<div >
<input type="text" placeholder="First Name" required ng-model="name" />
</div>
<div >
<input type="text" placeholder="Last Name" required ng-model="lname" />
</div>
<div >
<button type="Cancel" ng-click=clearDetails()>Clear</button>
<button type="submit" ng-click=addDetails() ng-disabled="myForm.$invalid">Submit</button>
</div>
</form>
after filling any of textfield press enters its calls the clearDetails function
$scope.addDetails = function() {
var postObj = new Object();
// add details stuff here
}
$scope.clearDetails = function() {
//refresh the page stuff here
//here i am redirecting to the same page
}
Change the type of the cancel button to reset:
<form name="myForm">
<div>
<input type="text" placeholder="First Name" required ng-model="name" />
</div>
<div>
<input type="text" placeholder="Last Name" required ng-model="lname" />
</div>
<button type="reset" ng-click=clearDetails()>Clear</button>
<button type="submit" ng-click=addDetails() ng-disabled="myForm.$invalid">Submit</button>
</form>
On many browser enter consider as submit form or associate with first button click .. just a suggestion move submit button up and cancel button down in html it might solve the problem.
make sure there must be space between two attributes of submit button. You wrote the code as
<button **type="submit"ng-click=addDetails()** ng-disabled="myForm.$invalid">Submit</button>
it must be
<button **type="submit" ng-click=addDetails()** ng-disabled="myForm.$invalid">Submit</button>