Develop Reference

web form pattern and title not working

I'm trying to create a form, and set the pattern and title fields programatically through JS. Can someone help me with working out why this isn't working.
The code below results in not being able to enter anything into the form field and the popup error saying "match the requested format".
var node = document.getElementById("text");
node.setAttribute("pattern", "\d+");
node.setAttribute("title", "Six or more characters");
<p>A form with a password field that must contain a positive integer:</p>
<form action="/action_page.php">
Enter a number: <input type="text" id="text" name="text">
<input type="submit">
</form>

The \ is an escape character. If you want to write a \ you will have to escape it with \\
var node = document.getElementById("text");
node.setAttribute("pattern", "\\d+");
node.setAttribute("title", "Six or more characters");
node.setAttribute("oninvalid", "setCustomValidity('Six or more characters')");
// this line is needed to clear the error status onchange, so user can enter newly correct input
node.setAttribute("onchange", "try{setCustomValidity('')}catch(e){}");
<p>A form with a password field that must contain a positive integer:</p>
<form action="/action_page.php">
Enter a number: <input type="text" id="text" name="text">
<input type="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!

What is the regular expression for username shouldn't be root

What I tried
^((?!root).)*$
Results
root invalid username
admin valid username
rootwee invalid username (this should be valid)
root123 invalid username (this should be valid)
I tried removing . from regex, then its not working
Can you please help with this?

Your regex features a tempered greedy token that disallows a certain substring in the whole input. Thus, "rootwee" and "root123" are invalid.
You can use
/^(?!root$)/
See demo
The anchored lookahead (?!root$) makes sure the whole input is not equal to root, but the string itself can contain root.
Note that when using a literal regex declaration, we needn't match the whole input string.
Here is a demo snippet:
function formCtrl($scope){
$scope.onSubmit = function(){
alert("form submitted");
}
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="formCtrl">
<form name="myForm" ng-submit="onSubmit()">
<input type="text" name="field" ng-model="formCtrl" ng-pattern="/^(?!root$)/" required>
<span ng-show="myForm.field.$error.pattern">Not valid!</span>
<span ng-show="myForm.field.$error.required">This field is required!</span>
<input type="submit" value="submit"/>
</form>
</div>

Check textbox on specific format

I have an issue.. I want to check a textbox for a specific format.
I will explain it with an example:
When the user types someting in a textbox. For example a phone number such as: 06-12345678
If the user types the phone number correct, a popup comes up with a message such as: You've entered the phone number correctly.
If the user types it incorrectly, a popup comes up with a message such as: You've entered the phone number incorrectly.
I've already made a jsfiddle for the textboxes, but not for the phone number check.
<input type="text" id="correct" value="06-12345678"><br><br>
<input type="text" id="wrong" value="06 12345678">
Jsfiddle link: Jsfiddle
I hope you can help me out

You use the change event.
function checkNumber(box) {
if (box.value.match("^[0-9]{2}\-[0-9]{8}$") !== null) {
alert("You entered the phone number correctly");
}
else {
alert("You entered the phone number incorrectly");
}
}
<input type="text" onchange="checkNumber(this)" value="" placeholder="Phone Number" />

You can use the pattern attribute in HTML 5.
Example:
<input type="text" pattern="^((\+\d{1,3}(-| )?\(?\d\)?(-| )?\d{1,5})|(\(?\d{2,6}\)?))(-| )?(\d{3,4})(-| )?(\d{4})(( x| ext)\d{1,5}){0,1}$">

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}$