How can I write a validation in HTML with below rules?
User ID total length should be 7 characters including alphabets and numbers
User ID must be start with alphabets [A-Z / a-z] and it should be 2 characters
Remaining 5 characters should be numbers [0-9]
Examples:
ab12345, xy56879, pm30075
HTML:
<form action="" method="post">
<div>
<label for="userid">User ID:</label>
<input type="text" name="userid" class="form-control" value="" required pattern="[A-Za-z]{2}+[0-9]{5}" title="User ID" aria-required="true" placeholder="Eg: ab12345">
</div>
<br>
<div>
<label for="email">Email Address:</label>
<input type="text" name="email" value="" required title="Email" aria-required="true" placeholder="hello.world#happyworld.com">
</div>
<button type="submit">Submit</button>
</form>
I hope the below pattern will do
pattern="(?=.*[A-Za-z]{2})(?=.*[0-9]{5}).{7,7}"
DEMO HERE
Just remove the + from your pattern:
input:invalid { outline: 1px solid red }
<input type="text" pattern="[A-Za-z]{2}[0-9]{5}" required="true" placeholder="Eg: ab12345">
Related
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 got a form with required fields, but it allows me to submit the form without a value in required fields. What would be the best way to validate this?
<form action="formmail.php" method="post" id="orderform" onsubmit="formmail.php">
<input name="company" id="company" type="text" class="orderFormFields" placeholder="Company Name" />
<input name="name" id="name" type="text" class="orderFormFields" placeholder="Name" required/>
<input name="phone" id="phone" type="text" class="orderFormFields" placeholder="Phone" required/>
<input name="email" id="email" type="email" class="orderFormFields" placeholder="Email" required/>
<button class="formButton" type='submit' id='submit' value='Submit'/>
</form>
You can also use this in your stylesheet to hide the submit until the user provides valid input. Using this method will also insure that the person filling out you form uses an actual email (as opposed to just typing "asdf").
.orderFormFields {
border-color: #3c3c3c;
}
.orderFormFields:valid {
border-color: green;
}
Good luck =)
I made this form:
<form>
Name:<br>
<input type="text" name="name">
Last mame:<br>
<input type="text" name="lastname">
Email:<br>
<input type="text" name="email">
Phone number:<br>
<input type="text" name="phone">
</form>
but I need only 9 numbers in Phone number.
How can i do this?
Then I need a form to chose a color something like this:
You can make a maximum length in a form with the maxlength attribute.
You can see this attribute in the example:
<form>
Phone number:<br>
<input type="text" name="phone" maxlength="9" >
</form>
2.You can make a form to chose the color with input type: color
<form>
Color:
<input type="color" name="color">
</form>
<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 !!
The 3 forms allow access as member, guest or then as newly registered.
However if someone clicks on the lower part of the form it automatically sends the cursor to the top part.
<form action="schlogin.php" method="post">
<fieldset>
<legend>Member's Login</legend>
<label for="username">Username:
<input type="text" name="username" id="username" value=""/>
</label>
</br>
<label for="password">Password:
<input type="password" name="password" id="password"/>
</label>
</br>
<input type="submit" name="login" class="loginButtons" value="login"/>
</label>
</br>
</fieldset>
</form>
<form action="schlogin.php" method="POST">
<fieldset>
<legend>Guest Player</legend>
<input type="submit" name="guest" class="loginButtons" value="Play as GUEST!" />
</label>
</br>
</fieldset>
</form>
<form action="schlogin.php" method="POST">
<fieldset>
<legend>FAST Register</legend>
<label for="username">Username:
<input type="text" name="username" id="username" value =""/>
</label>
</br>
<label for="password">Password:
<input type="password" name="password" id="password"/>
</label>
</br>
<label for="email">E-mail:
<input type="text" name="email" value=""/>
</label>
</br>
<input type="submit" name="register" class="loginButtons" value="I WANT TO PLAY TOO!"/>
</label>
</br>
I've forgotten my password:
<input type="submit" name="forgotten" class="loginButtons" value="Send me a new password!"/>
</label>
</br>
</fieldset>
</form>
Validate, validate, validate.
You have duplicate id attributes, so the labels in your second form are for the inputs in the first form.
In your second form change
<label for="username">Username:
<input type="text" name="username" id="username" value ="<?php if (isset($username)){echo $username; }?>"/></label></br>
to:
<label for="register_username">Username:
<input type="text" name="username" id="register_username" value ="<?php if (isset($username)){echo $username; }?>"/></label></br>
or whatever you like.
The point is that the id for every html element should always be unique. And the label element's for attribute should match it's associated input element's id attribute.