so after I made these changes the form won't accept any input. Meaning if I don't put in a first name it says 'Please enter first name". Works like it should. But if I put in a name it still says the same thing. It won't recognize I put in a name. Happens in each field and I have to refresh the page to make it work. Any ideas?
<form action="register.php" method="post">
<p>First Name: <input type="text" name="first_name" size="15" maxlength="20" required oninvalid="this.setCustomValidity('Please Enter first name')"></input> </p>
<p>Last Name: <input type="text" name="last_name" size="15" maxlength="40" required oninvalid="this.setCustomValidity('Please Enter last name')"></input>></p>
p>Email Address: <input type="text" name="email" size="20" maxlength="60" required oninvalid="this.setCustomValidity('Please Enter a valid email')"> </input>></p>
<p>Password: <input type="password" name="pass1" size="10" maxlength="20" required oninvalid="this.setCustomValidity('Please Enter a valid password')"> </input></p>
<p>Confirm Password: <input type="password" name="pass2" size="10" maxlength="20" required></p>
<p><input type="submit" name="submit" value="Register" /></p>
</form>
You need to setCustomValidity('') to clear the invalidated state of the field.
You can see it work here
<form action="register.php" method="post">
<p>First Name: <input type="text" name="first_name" maxlength="20"
required oninvalid="this.setCustomValidity(this.willValidate?'':'Please Enter first name')"/></p>
<p>Last Name: <input type="text" name="last_name" size="15" maxlength="40" required oninvalid="this.setCustomValidity(this.willValidate?'':'Please Enter last name')"/></p>
<p>Email Address: <input type="text" name="email" size="20" maxlength="60" required oninvalid="this.setCustomValidity(this.willValidate?'':'Please Enter a valid email')"/></p>
<p>Password: <input type="password" name="pass1" size="10" maxlength="20" required oninvalid="this.setCustomValidity(this.willValidate?'':'Please Enter a valid password')"/> </p>
<p>Confirm Password: <input type="password" name="pass2" size="10" maxlength="20" required /></p>
<p><input type="submit" name="submit" value="Register" /></p>
</form>
Related
I have a simple html formula with many input fields:
<input type="text" id="vorname" name="vorname" placeholder="Vorname" autocomplete="given-name" required>
<input type="text" id="nachname" name="nachname" placeholder="Nachname" autocomplete="family-name" required>
<input type="text" id="firma" name="firma" placeholder="Firma" autocomplete="organization">
<input type="text" id="strasse" name="strasse" placeholder="Straße" autocomplete="address-level2" required>
<input type="text" id="plz" name="plz" placeholder="PLZ" maxlength="5" pattern="[0-9]+" autocomplete="postal-code" required>
<input type="text" id="ort" name="ort" placeholder="Ort" autocomplete="street-address" required>
<input ype="email" id="email" name="email" placeholder="E-Mail" autocomplete="email" required>
<input type="tel" id="tel" name="tel" placeholder="Telefon" pattern="[0-9]+" autocomplete="tel" required>
If I call the website with my iPhone and I click on the first input "vorname" I get the option "Fill contact automatically".
All values will be filled automatically except "nachname","firma","Straße","PLZ"
On Safari (macOS) I get no option to filled any fields.
Where is my mistake?
I am writing the following HTML code which requires certain input values and has a submit button which redirects to a different site when clicked. Currently the Submit button redirects even if no value is entered into the input boxes. I want the submit button to only work if all the input values are filled.
<!DOCTYPE html>
<html>
<body>
<h3>Please enter the following information</h3>
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="" required><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="" required><br>
<label for="email">Email:</label><br>
<input type="text" id="email" name="email" value="" required><br>
<label for="UserID">UserID:</label><br>
<input type="text" id="UserID" name="UserID" value="" required><br>
<label for="password">Password:</label><br>
<input type="password" id="password" name="password" value="" required><br><br>
<input onclick="window.location.href = 'https://example.site';" type="submit" value="Submit" />
</form>
</body>
</html>
The reason is because your submit isn't properly structured.
You see, if you replace your input submit with a button, it works perfectly:
<!DOCTYPE html>
<html>
<body>
<h3>Please enter the following information</h3>
<form action="https://example.site">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="" required><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="" required><br>
<label for="email">Email:</label><br>
<input type="text" id="email" name="email" value="" required><br>
<label for="UserID">UserID:</label><br>
<input type="text" id="UserID" name="UserID" value="" required><br>
<label for="password">Password:</label><br>
<input type="password" id="password" name="password" value="" required><br><br>
<button>Submit</button>
</form>
</body>
</html>
All you would have to change is add the link which you want it to redirect to in the action defined in the form.
This is the recommended method.
Keep in mind that you should always perform server-side checks regardless of whether there is a required attribute in the input field, as it can easily be removed.
I've a form that works perfectly fine on Chrome, Safari, but not Firefox.
Try#1
<form id="subscribe-form" class="footer-sign-up" action="/subscribe" method="POST">
<input type="text" placeholder="First Name" name="first_name" id="fname" required>
<input type="text" placeholder="Last Name" name="last_name" id="lname" required>
<input id="footer-email" type="text" placeholder="Your Email Address" name="email" required>
<input type="submit" id="subscribe" class="signupbtn" value="sign up">
</form>
Try#2
<form id="subscribe-form" class="footer-sign-up" action="/subscribe" method="POST">
<input type="text" placeholder="First Name" name="first_name" id="fname" required>
<input type="text" placeholder="Last Name" name="last_name" id="lname" required>
<input id="footer-email" type="text" placeholder="Your Email Address" name="email" required>
<button type="submit" id="subscribe" class="signupbtn">sign up</button>
</form>
result
Network Tab
Header
Params
How would one go about debugging this further?
I think I may have found something; if you're submitting via AJAX, but not preventing the page submit, you'll have an issue.
Change part of your code to:
$('#subscribe').click(function(e){
e.preventDefault();
...
This should only do the AJAX submit, and not refresh the page.
I was also able to submit via FireFox by changing button type="submit" to button type="button", so that it won't natively submit the page on press.
You need to add a CSRF token to your form. Assuming this is a blade file:
<form id="subscribe-form" class="footer-sign-up" action="/subscribe" method="POST">
{{ csrf_field() }}
<input type="text" placeholder="First Name" name="first_name" id="fname" required>
<input type="text" placeholder="Last Name" name="last_name" id="lname" required>
<input id="footer-email" type="text" placeholder="Your Email Address" name="email" required>
<input type="submit" id="subscribe" class="signupbtn" value="sign up">
When a page in Laravel loads, you can print a CSRF or Cross Site Request Forgery token which is good for a certain amount of time. Any POST request needs to have a current one of these, otherwise Laravel will give you a page expired error.
<form id="contact_form" action="/contact-verzenden" method="POST" enctype="multipart/form-data" >
<input class="textbox" type="text" name="name" id="name" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'Naam':this.value;" value="Jouw naam" required/>
<input class="textbox" type="text" name="name" id="tel" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'Telefoon':this.value;" value="Telefoon" required/>
<input class="textbox" type="text" name="email" id="email" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'E-mail':this.value;" value="E-mail" required/>
<textarea rows="6" cols="30" type="text" name="message" id="message" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'Vraag/opmerking':this.value;" required >Vraag/opmerking</textarea>
<input id="submit_button" type="submit" value="Verzenden" />
</form>
When I click submit, the data sends regardless of whether something has been entered or not.
Even though it's exactly the same as the W3 schools example:
http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_required
What am I doing wrong?
Because you still have value in every input elements.
Try using placeholder to make it look like your design.
<input class="textbox" type="text" name="name" id="name" placeholder="test" required/>
check this code:
<!DOCTYPE html>
<form id="contact_form" method="POST" enctype="multipart/form-data" >
<input class="textbox" type="text" name="name" id="name" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'Naam':this.value;" placeholder="Jouw naam" required/>
<input class="textbox" type="text" name="name" id="tel" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'Telefoon':this.value;" placeholder="Telefoon" required/>
<input class="textbox" type="text" name="email" id="email" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'E-mail':this.value;" placeholder="E-mail" required/>
<textarea rows="6" cols="30" type="text" name="message" id="message" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'Vraag/opmerking':this.value;" required ></textarea>
<input id="submit_button" type="submit" value="Verzenden" />
</form>
</html>
Because you are already giving him value (value="Jouw naam") and also onblur you are giving it a value ("Naam"). So the value is never empty. That`s why it is submitting the form.
Add placeholder="Jouw naam" instead of value = "Jouw naam"
Hope it helps !!
This text box property is not over-writable. It needs to delete the default value by backspace or select and delete. So how to make it over-writable?
<form action="demo_form.asp">
First name: <input type="text" name="fname" value="first name"><br>
Last name: <input type="text" name="lname" value="last name"><br>
<input type="submit" value="Submit">
</form>
"placeholder" can do the trick:
<form action="demo_form.asp">
First name: <input type="text" name="fname" placeholder="first name"><br>
Last name: <input type="text" name="lname" placeholder="last name"><br>
<input type="submit" value="Submit">
</form>