Develop Reference

Cross browser code to restrict user input using Javascript

I found this code through Stack Overflow to restrict users from putting numbers in a textbox, however it only works in Chrome and IE. Anyone know of any cross browser code to do this?
Note: we've already added the global attribute and it didn't work at all, this was the only one that fully worked in Chrome and IE.
<input type="text" onkeyup="this.value = this.value.replace(/[^a-z]/, '')" />

You want to catch onkeydown that is when the character gets inserted, not on onkeyup. You should also instead of removing the number, just prevent it from getting inserted with event.preventDefault()
<p>
<input type="text" onkeydown="event.key.match(/\d/) && event.preventDefault()" />
</p>
One thing I would recommend is removing the code from the html and putting it in a function so it is reusable like this:
// Wait till the dom is loaded
document.addEventListener('DOMContentLoaded', function(e) {
// Add the event to each input that has `data-type="number"`
document.querySelectorAll('[data-type=number]').forEach(function(input) {
// Add the event to the input
input.addEventListener('keydown', number)
})
})
function number(event) {
event.key.match(/\d/) && event.preventDefault()
}
<p>
<input type="text" data-type="number" />
</p>

setCustomValidity Bootstrap keep error popup

I've implement localization in my application, all this stuff is saved inside a php file. So I can easy do this:
<input class="form-control" type="text" required="" placeholder="username" oninvalid="this.setCustomValidity('<?php echo $this->lang->line('field_required'); ?>')"></input>
Now if I doesn't enter any text I can see the custom message, but if I fill the input I see again the popup as the form can't get the text inside.
It's a bug of Bootstrap?
EXAMPLE
https://jsfiddle.net/DTcHh/23662/

Using the onvalid won't work in some browsers like Safari or IE below 10. Use a custom event notifier for attaching the function.
Note: As you mentioned in the comment you can print the message from the data-invalid-message attribute from php and catch it using jQuery by .data('invalidMessage').
SEE WORKING EXAMPLE:
var myobj = jQuery('input.form-control');
myobj.on('keyup keypress blur change input', function() {
var messg = ($(this).data('invalidMessage'));
if (this.validity.typeMismatch) {
this.setCustomValidity(messg);
} else {
this.setCustomValidity('');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<form>
<input class="form-control" type="email" required placeholder="username" data-invalid-message="custom message from php here">
<button type="submit">
go
</button>
</form>

a workaround that I've found is:
onkeyup="this.setCustomValidity('');
the bug will be gone now.

TL&DR
Check element.validity.typeMismatch and then element.setCustomValidity('custom error msg') or element.setCustomValidity('') if there's no mismatch. You should listen on both keyup and blur events.
Explanation in Mozilla Developer documentation about setCustomValidity: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/Data_form_validation#Customized_error_messages.
But just keyup won't work properly if focus is not inside the input box we're modyfing.
Our previous example won't transfer the current state of the input box
if the user mouses away and clicks elsewhere on the page. We update
the component's values property only when the user presses Enter while
the focus is inside the input box.
Let's fix that by listening to the input box's blur event as well.
Above is from Angular 2 docs: User Input, paragraph "On blur" https://angular.io/docs/ts/latest/guide/user-input.html.
Simplified example
Below is example from Mozilla documentation with added blur keyEvent listener. Yup, refactoring needed, but mine version in Angular 2 looks vastly different and so probably will yours.
<form>
<label for="mail">I would like you to provide me an e-mail</label>
<input type="email" id="mail" name="mail">
<button>Submit</button>
</form>
And then
var email = document.getElementById("mail");
email.addEventListener("keyup", function (event) {
if (email.validity.typeMismatch) {
email.setCustomValidity("I expect an e-mail, darling!");
} else {
email.setCustomValidity("");
}
});
email.addEventListener("blur", function (event) {
if (email.validity.typeMismatch) {
email.setCustomValidity("I expect an e-mail, darling!");
} else {
email.setCustomValidity("");
}
});

Check validity of as required marked fields in javascript

I do not want to perform a submit action when pressing the "submit" button on my form but rather perform some data manipulation and then submit the form using javascript form.submit - as such I do not use the <input type="submit"> element in my form:
<form action="process.php" method="post" name="myForm">
<input type="text" name="entry" id="entry" required />
<input type="button" value="Submit" onclick="manipulate_and_submit(this.form, this.form.entry);" />
</form>
With the script being something like:
function manipulate_and_submit(form, entry) {
var val = entry.value;
var hidden = document.createElement("input");
form.appendChild(hidden);
hidden.type = "hidden";
hidden.name = "m";
hidden.value = generate_other_value(val);
entry.value = "";
form.submit();
}
But before submitting I want to validate the entry and other elements of the form - I can do that manually ofc. but HTML5 gives us the required and so many other attributes - how can I simply integrate them? Is there something like form.isValid() ? Googling "validate javascript html form" just gives me examples that deal with the manual validation in javascript from "ye olde times" ...

You can use checkValidity, which is a method provided by HTMLFormElement. In your example, it would be something like if ( !form.checkValidity() ) { code here }. From MDN:
[checkValidity] Returns true if all controls that are subject to constraint validation satisfy their constraints, or false if some controls do not satisfy their constraints. Fires an event named invalid at any control that does not satisfy its constraints; such controls are considered invalid if the event is not canceled.
Source
As that says, it also fires an invalid event at every invalid form item. Then you can just make your own handler to show invalidity, like something described in this answer.

Incorrect Javascript Functions?

I am completely brand new to Javascript. In fact, I'm just an Objective-C programmer looking to implement just a little Javascript into one of my apps. So, the problem is for whatever reason when I call my first function, nothing happens there I don't get the alert. When I call my second function I only get the alert, the button isn't actually clicked.
Code:
function myFunction(username, password) {
alert("Data will be entered");
document.getElementById('ctl00_plnMain_txtLogin').value = username;
document.getElementById('ctl00_plnMain_txtPassword').value = password;
}
function click() {
alert("The button was clicked");
document.getElementById("ctl00_plnMain_Submit1").click();
}
I can seem to run just a regular alert fine, but nothing else??? Is there something wrong in my function?
If it helps, on the website here is the "username" box:
<input name="ctl00$plnMain$txtLogin" type="text" maxlength="50" id="ctl00_plnMain_txtLogin" tabindex="1">
"password" box:
<input name="ctl00$plnMain$txtPassword" type="password" maxlength="255" id="ctl00_plnMain_txtPassword" tabindex="2">
the button:
<input onclick="if (typeof(Page_ClientValidate) == 'function') Page_ClientValidate(''); " name="ctl00$plnMain$Submit1" type="submit" id="ctl00_plnMain_Submit1" tabindex="3" value="Log In" title="Log in">
-- EDIT
Also, I am starting the functions through my objective C code. I grab a js file, then I am able to use its functions on a webpage.

I would recommend using a DOM abstraction library like jQuery
jQuery provides an 'on' method, it's used to bind events to DOM elements:
$('#ctl00_plnMain_Submit1').on('click', function (event) {
alert("The button was clicked");
}
It also provides a nice abstraction for collecting input values:
var userName = $('#ctl00_plnMain_txtLogin').val();
You can also use it to set the value of an input:
$('#ctl00_plnMain_txtLogin').val('New Value for This Input');
Populating inputs with a function:
function populateInputs (username, password) {
$('#ctl00_plnMain_txtLogin').val(username);
$('#ctl00_plnMain_txtPassword').val(password);
}

I am guessing you want the click function to be called when the button is clicked
You need to specify that then
<input onclick="click()" ....

Why is my HTML form being submitted?

I have this form with 1 field. I want that when the user clicks or hits enter it should call a JavaScript function that will do validation and either display an error message or submit the form.
However, when hitting enter it submits the form regardless. (So far in my JavaScript validation function I only have alert ("Hello World"))
<form action="add-another-number-to-dnc.cshtml" method="post" id="addDNCform">
<h4>Enter 10-digit phone number without dashes, dots or parenthesis</h4>
<input type="text" name="pn" required placeholder="phone number"
title="Phone Number to Add to Do-Not-Call List"
onkeypress="if (event.keyCode == 13) document.getElementById('btnVldt').click()"/> <!-- all this is to treat [Enter] as a click -->
<input id="btnVldt" type="button" value="Add Number to Do Not Call list" onclick="submitDNC()"/>
</form>
I added all the page code in jsFiddle where you can test and verify that:
when clicking on the button, it correctly doesn't submit the form
when hitting enter it gives you an Error 404 which must mean, it's trying to load the page.
Added this:
Actually, if I use submit instead of button, it doesn't work also when clicking. However, in jsFiddle it seems to work.

Expanding on Praveen's answer here, I'm going to write the JavaScript "unobtrusively" to further separate function, presentation, and content:
HTML
<form action="add-another-number-to-dnc.cshtml" method="post" id="addDNCform">
<h4>Enter 10-digit phone number without dashes, dots or parenthesis</h4>
<input type="text" name="pn" required placeholder="phone number" title="Phone Number to Add to Do-Not-Call List" />
<button type='submit'>Add Number to Do Not Call list"</button>
</form>
(X)HTML5
Assuming that you want a 10-digit number in the box (numeric characters only), we can also use the pattern attribute on the <input> element in HTML5 as a form of validation for newer browsers (Firefox, Chrome, IE10, Opera):
<form action="add-another-number-to-dnc.cshtml" method="post" id="addDNCform">
<h4>Enter 10-digit phone number without dashes, dots or parenthesis</h4>
<input type="text" name="pn" required placeholder="phone number" title="Phone Number to Add to Do-Not-Call List" pattern="[0-9]{10}" />
<button type='submit'>Add Number to Do Not Call list"</button>
</form>
JavaScript (place inside <script> tags somewhere on the page)
function submitDNC(event) {
var valid = false;
alert('Hello world');
// your validation logic goes here, sets valid to TRUE if it's valid
if(!valid) {
event.preventDefault();
}
}
document.getElementById('addDNCform').addEventListener( 'submit', submitDNC, false );
No need to do any synthetic button clicking if all you're trying to do is validate upon form submission. Pretty soon with HTML5 we might not even need JavaScript for this, depending on what your validation logic is.

In your submitDNC() function, give a return false;.
function submitDNC()
{
alert("Hello World!");
return false;
}
Another thing is, change your input type from button to submit. Use:
<input id="btnVldt" type="submit"
value="Add Number to Do Not Call list" onclick="return submitDNC();" />
Explanation
The return value of an event handler determines whether or not the default browser behaviour should take place as well. In the case of clicking on links, this would be following the link, but the difference is most noticeable in form submit handlers, where you can cancel a form submission if the user has made a mistake entering the information.
Another Option
As Rink says, return false; is overkill for something that can and should be handled by preventDefault(). So, you can do this way, by using unobtrusive JavaScript.
function submitDNC()
{
alert("Hello World!");
var e = window.event;
e.preventDefault();
}

To prevent submit when pressing ENTER, use this piece of code:
function checkEnter(e){
e = e || event;
var txtArea = /textarea/i.test((e.target || e.srcElement).tagName);
return txtArea || (e.keyCode || e.which || e.charCode || 0) !== 13;
}
then, add the handler to the form:
document.querySelector('form').onkeypress = checkEnter;

I would change the to a Submit, although this isn't what's getting you in trouble here. For some odd reason browser programmers thought it was a good idea to code so that browsers assume buttons within forms submit them. You'll want to change onkeypress to call a function. In that function do something like this:
function keyPressPhone() {
if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
document.getElementById("addDNCform").submit();
return true;
}
else {
return false; // somehow prevents the form from being submitted
}
}