I trying to configure the pattern to be able to submit a mobile number that should start with 09 followed by a '0-9' digits. Total max characters are 11.
Sample: 09493432199 or 09267778595
<form action="/action_page.php">
<label for="username">Username:</label>
<input type="text" id="username" name="username" pattern="[09]+[0-9]" maxlength="11"><br><br>
<input type="submit" value="Submit">
</form>
Your html seems nice
<form action="/action_page.php">
<label for="username">Username:</label>
<input type="text" id="username" name="username" pattern="[0-9]" maxlength="11"><br><br>
<input type="submit" value="Submit">
</form>
You need also have JS like follow :
var username_prefix = $('#username').subsubstr(0,2);
$('#validate').click(function(){
if (username_prefix == 09) {
alert('correct');
}
else {
alert('incorrect');
}
});
Use an expression with fixed digits plus a specific amount of digits.
If you need the exact 11 characters, then use 09[0-9]{9}
In this example 09[0-9]{8,9} are valid 0912345678 and 09123456789
<form action="/action_page.php">
<label for="username">Username:</label>
<input type="text" id="username" name="username" pattern="09[0-9]{8,9}" maxlength="11"><br><br>
<input type="submit" value="Submit">
</form>
As a side note, even if using input pattern is supported by the most common browsers, you should not rely only on the client side validation. Use a similar validation from the PHP backend to verify the information (in this case additional ^ (start of expression) and $ (end of expression) were added.
if (!preg_match("/^09[0-9]{9}$/",$_GET["username"])){
// not valid
}
You can use this RegExp
It will match
when the number starts with 09 AND
when the number has exactly 11 digits
pattern = /09[0-9]{9}/
Try it out here
https://regex101.com/r/Nl2c2y/3
<form action="/action_page.php">
<label for="username">Username:</label>
<input type="text" id="username" name="username" pattern="09[0-9]{9}" maxlength="11"><br><br>
<input type="submit" value="Submit">
</form>
<form action="/action_page.php">
<label for="username">Username:</label>
<input type="text" id="username" name="username" pattern="[0-9]" title="Zero is required" maxlength="11"><br><br>
<input type="submit" value="Submit">
</form>
Related
Let's say this is my html in reactjs/jsx:
<form action="/search-list" method="GET">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">
</form>
and when i click on the submit buttoin without inputing anything, it make the url like this fname=&lname=
and when i fill anly fname and submit, the url become like this fname=JhonDoe&lname=
Notice here, i didn't fill the lname, yet the lname is here in url which i dont want.
I want, if a field has value, that field should be in url as query params, if not field, that field should not be in url query params.
is it possible to do? how can I do it? All the fields should be optional.
You can use this plain JavaScript to remove the empty inputs from submitting.
<form method="GET" id="myForm">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">
</form>
<script>
Form = document.getElementById("myForm");
Form.addEventListener('submit',()=>{
if(Form.fname.value == ""){
Form.fname.name ="";
}
if(Form.lname.value == ""){
Form.lname.name ="";
}
Form.submit();
});
</script>
This format of html form control doesn't pass form data
<form action="index.php?action=createNewCustomer"
method="POST">
<fieldset>
<label class="field" for="firstName">First Name:</label>
<input type="text">
</fieldset>
<input type="submit">
</form>
but this one does
<form action="index.php?action=createNewCustomer"
method="POST">
<fieldset>
<label>First Name:</label>
<input type="text" name="firstName">
</fieldset>
<input type="submit">
</form>
Unless I'm missing something obvious, the difference is in the label control..Are both valid and if so, can anyone explain to me why only the second one passes form data to my PHP controller method.
<input type ="submit"> is not part of the fieldset in the first bit of code, but I don't think that's really the issue.
I believe changing the code on the first bit to:
<form action="index.php?action=createNewCustomer"
method="POST">
<fieldset>
<label for = "firstName">First Name: </label>
<input type="text" name = "firstName">
<input type="submit">
</fieldset>
</form>
will work. You need to make sure the name of the input is the same as the property you are trying to set.
I'm going to realize input of text like this:
<input type="text" maxlength="16" required/>
And want to use valid and invalid stations like this:
input:invalid {
background: #fdd;
}
input:valid {
background: #dfd;
}
But when i write any text my input is valid always. I tried use pattern:
pattern=".{16,}"
But that did not solve anything. Where is my mistake?
The input must be valid when length of input is equal to 16.
You're close! Here's how to do it.
Allowing only alphanumerics
<form>
<input id="username" type="text" pattern="[a-zA-Z0-9]{16}" required>
<input id="submit" type="submit" value="create">
</form>
Allowing any character
<form>
<input id="username" type="text" pattern=".{16}" maxlength="16" required>
<input id="submit" type="submit" value="create">
</form>
With jQuery mask() plugin
Here, we just force the delimiter to be part of the input value followed by the number of characters in each group. In this case 4 numbers followed by a space.
$(document).ready(function() {
$('#username').mask('9999 9999 9999 9999');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.0/jquery.mask.min.js"></script>
<form>
<input id="username" type="text" pattern="[0-9]{4} [0-9]{4} [0-9]{4} [0-9]{4}" required>
<input id="submit" type="submit" value="create">
</form>
For more info about regex and patterns, check out Regexr.
In your code, the attribute maxlength="16" does not allow more than 16 characters to be typed in the input box. The regular expression you are using is valid when the input is between 0 and 16 characters. Therefore, you regexp should be:
.{16,16}
And your HTML code:
<input type="text" pattern=".{16,16}" maxlength="16" required/>
You might want to see it working in this fiddle.
I'm making a form which collect some data from a person and then use a simple mailto: to put it in their e-mail client like so (example):
<form method="post" action="mailto:email#address.com?subject=Stuff">
<p>Name: <input type="text" name="Name" placeholder="Number"></p>
<p>Address: <input type="text" name="Address" placeholder="Number"></p>
<p>City: <input type="text" name="City" placeholder="Number"></p>
<p>Comment: <input type="text" name="Comment" placeholder="Number"></p>
<p><input type="submit" value="SEND"></p>
</form>
It then comes out like this:
Name=Bob&Address=something&City=more&Comment=elsemore
but what I want is:
Name=Bob
Address=something
City=more
Comment=elsemore
or even better:
Name = Bob
Address = something
City = more
Comment = elsemore
Is it at all possible currently to do this just within HTML? HTML5 and Python is all I know (mostly only the basic parts too). Maybe someone could help me out with the proper code/script on this.
I did find some other posts on this but they are old and don't answer the question.
You need to set the Encryption Type (enctype="text/plain"):
<form method="post" action="mailto:email#address.com?subject=Stuff" enctype="text/plain">
<p>Name: <input type="text" name="Name" placeholder="Number"></p>
<p>Address: <input type="text" name="Address" placeholder="Number"></p>
<p>City: <input type="text" name="City" placeholder="Number"></p>
<p>Comment: <input type="text" name="Comment" placeholder="Number"></p>
<p><input type="submit" value="SEND"></p>
</form>
You could also write some stuff in Javascript and then work with the body parameter. But i wouldn't recommend this.
In most times, it is better to let the webserver handle the email communication.
Asp: http://www.codeproject.com/Tips/371417/Send-Mail-Contact-Form-using-ASP-NET-and-Csharp
Php: http://tangledindesign.com/how-to-create-a-contact-form-using-html5-css3-and-php/
How do you change the value of a hidden form with the id's of text forms? I have something like the following:
<form name="form" action="file.php" method="post">
<input type="hidden" name="dessert" id="dessert" value="">
Favorite cake: <input type="text" name="cake" id="cake" onfocus="dessert.value=this.id"><br>
Favorite pie: <input type="text" name="pie" id="pie" onfocus="dessert.value=this.id"><br>
Favorite taffy: <input type="text" name="taffy" id="taffy" onfocus="dessert.value=this.id"><br>
<input type="submit value="Go."><br>
I'm pretty unfamiliar with html, so I'm having trouble changing the value of the hidden form with the id of the text input onfocus.
Your code works, you just have a syntax error.
<input="hidden" name="dessert" id="dessert" value="">
Should be:
<input type="hidden" name="dessert" id="dessert" value="">
notice the "type="
Works in Chrome: fiddle
Try:
<form name="form" action="file.php" method="post">
<input type="hidden" name="dessert" id="dessert" value="">
Favorite cake: <input type="text" name="cake" id="cake" onfocus="document.getElementById('dessert').value=this.id"><br>
Favorite pie: <input type="text" name="pie" id="pie" onfocus="document.getElementById('dessert').value=this.id"><br>
Favorite taffy: <input type="text" name="taffy" id="taffy" onfocus="document.getElementById('dessert').value=this.id"><br>
<input type="submit value="Go."><br>
Using the format:
onfocus="document.getElementById('dessert').value=this.id"
jsFiddle example