Develop Reference

Different title when input invalid and input empty

I have an input:
<input type="text" pattern="[a-zA-Z ]{0,20}" oninvalid="setCustomValidity('Please insert only letters')" required>
If I input a number, the title will appear. But if I don't input anything, it will give the same error title. How can the title when I input not only letters is different when I doesn't input anyhing?

I think that your problem is similar to the one in this link.
The correct answer there says that:
If you set a value with setCustomValidity() then the field is invalid. That is setting a non-zero length string causes the browser to consider the field invalid. In order to allow for the effects of any other validations you have to clear the custom validity:
<input type="password" name="user_password_new" pattern=".{6,}" required oninvalid="setCustomValidity('Minimum length is 6 characters')" oninput="setCustomValidity('')" />
Here is a working example for your case to see:
<form>
<input type="text" pattern="[a-zA-Z ]{0,20}" oninvalid="setCustomValidity('Please insert only letters')" required oninput="setCustomValidity('')">
<button type="submit">Submit</button>
</form>

PHP form Submit multiple values through one form field and append to array

I have php form that posts data to URL with single field, the problem is I can only submit one value. I have a barcode scanner that I want to be able to scan multiple serial number barcodes and submit the form. I probably need a javascript but I am not sure. See below
<?php
echo("Serial Number: " . $_POST['serial'] . "<br />\n");
?>
<form action="myform5.php" method="post">
<p>First name: <input type="text" name="serial" /></p>
<input type="submit" name="submit" value="Submit" />
</form>
So in other words, I want a form field where I can enter multiple serial numbers and be able to post the data to the URL. Since I am using barcode scanner which also submits enter key after each scan, so I want to be able to add multiple serials without touching the keyboard and when finished, should be able to click submit and it posts the data.
The SQL query would be something like this;
select * from hdds where serial IN ('5MQ3DJAA', '5MQ3DJAB', '5MQ3DJAC', '5MQ3DJAB', '5MQ3DJAR');
I dont want to use the textarea field, I cannot figure out how to have a single input type text field and have a add button next to it, when a serial number is scanned or entered, that number is added to list below, that number is shown below the field and serials keep adding up when done press the submit button that posts the data.
This is what I am looking to do, see below example.
I would appreciate a small working example?

If you need to enter multiple serial numbers then add serial number as an array values. Try this :
<?php
if(isset($_POST['submit'])){
echo "Serial Numbers";
echo "<br/>";
$serial = $_POST['submit'];
print_r($serial);
}
?>
<form action="myform5.php" method="post">
<p>serial number: <input type="text" name="serial[]" /></p>
<p>serial number: <input type="text" name="serial[]" /></p>
<p>serial number: <input type="text" name="serial[]" /></p>
<input type="submit" name="submit" value="Submit" />
</form>

Read comma-separated values in HTML form

I have a simple HTML input element:
<input type="text" class="form-control" name="value">
This field could have comma-separated values e.g. ABC, DEF, GHI. The field value when submitted must be exactly the same as when entered. However, when I am printing the field value to the console, I am getting
ABC%2C+DEF%2C+GHI.
I want ABC, DEF, GHI
I tried things like decodeURIComponent and accept-charset="ISO-8859-1" for the form, but they don't work. How can I prevent the encoding of the commas and spaces? Thanks in advance!

Before submiting, encode the value and it should work, according to my test
<form id="myForm" action="form.php" method="GET">
<input id="encodeMe" name="string" value="this will be encoded correctly" />
<input type="submit" value="OK" />
</form>
$('#myForm').submit(function() {
var enc = escape($("#encodeMe").val());
$("#encodeMe").val(enc);
});

Ok, I got it. In JavaScript, the input field has to be handled thus:
decodeURIComponent(str.replace(/\+/g,' '))
where str = ABC%2C+DEF%2C+GHI. Only decodeURIComponent is not enough. Hope it helps!

Changing the recipient of the mailto to what is entered in the text field

I wanted to know if it possible to make a form where one could change the email to which the mailto action is set, to what is entered in the text field.
for example:
<form enctype="text/plain" method="get" action="mailto:getElementByName='friend1'" action="cc:manager#crill.com">
Friend 1 <input type="text" name="friend1"><br>
Friend 2 <input type="text" name="friend2"><br>
Friend 3 <input type="text" name="friend3"><br>
<input type="submit" value="Send">
</form>
So if in the first field named "Friend 1" I would enter: "example1#mail.com", then when I press submit I wanted it to take the info that was placed into the first field and make it the mailto.
I apologise for my english, hope whom ever reads this understands it.
Thank you in advance.

You could do it by using:
<form method="post" action="javascript:;" onSubmit="this.action='mailto:'+document.getElementById('friend1').value;" enctype...>
Check here too: Is it possible to dynamically set the recipient of MAILTO: with only HTML and JavaScript?

RegEx Not Recognizing Invalid Email

I am trying to validate an email address for a form element. I am familiar with regular expressions so I believe that part is correct, but I want it to display an alert when the email entered is invalid. My problem is that the form submits even when I enter an invalid email address instead of popping up the alert window.
RegEx function in javascript:
function validateEmail()
{
var myEmailRegEx = /\w+#\w+\.[a-z]|[A-Z]|\d|\.|-{2,}/
if(myEmailRegEx.test(document.getElementById("EmailAddress")))
{
return true;
}
else
{
alert("That is not a valid email address");
return false;
}
}
form HTML:
<input type="text" name="Email" id="EmailAddress" size="50" />
<br />
<input type="submit" value="Submit Email" onClick="validateEmail();" />

Just for the sake of clarity, the problem with what you were doing was that you were giving an object to the regex for testing, which always returns true(weird though). With the .value we get the string that the field holds and then test the regex against it.
you should use,
var myEmailRegEx = new RegExp("/\w+#\w+\.[a-z]|[A-Z]|\d|\.|-{2,}")
myEmailRegEx.test(document.getElementById("EmailAddress").value)
Suppose that email address is present in a form with id = "my_form". To prevent the default submission of that form, you would use
$("#my_form").preventDefault();
if the email turns out to be true, you could then submit the form.
if(myEmailRegEx.test(document.getElementById("EmailAddress").value)){
document.getElementById("mu_form").submit();
}
that should be it. I hope you have an idea where to plug in these code snippets :-)

Could just do:
<input type="email" />
and be done with it.

Try using an onchange event on the input field contain the email. For example:
<input type="text" name="Email" id="EmailAddress" size="50" onchange="validateEmail();" />
<br />
<input type="submit" value="Submit Email"/>
The above approach will call your validateEmail function whenever the value changes in that field.

While this doesn’t directly answer your question, it should be noted that your regex returns a lot of false negatives. For example, and email address with a . in the address, such as my personal email address, first.last#gmail.com
A good starting place is to start here
I will copy the "basic" email regex below for convenience.
^[A-Z0-9._%+-]+#[A-Z0-9.-]+\.[A-Z]{2,4}$