Develop Reference

How can I create custom form required error text without adding excess code in my signup form?

So I have the required error message showing the input + id that is attached to it in the html
<div class="form-validation">
<input class="modal-input" id="password" type="password" placeholder="Enter your
password">
<p>Error Message</p>
</div>
<div class="form-validation">
<input class="modal-input" id="password-confirm" type="password" placeholder="Confirm your password">
<p>Error Message</p>
</div>
So as you can see, the id's equal password and then password-confirm
Now the problem is I don't know how to create a custom text to change it from saying password-confirm to just saying password without overlapping with the id names.
Here's a picture below of what I mean
And here is the function that I wrote in order to get the "Password-confirm" to display
function getFieldName(input) {
return input.id.charAt(0).toUpperCase() + input.id.slice(1);
}
And here is my function the make sure the required fields show the error message with the getFieldName as the first word in the message
function checkRequired(inputArr) {
inputArr.forEach(function (input) {
if(input.value.trim() === '') {
showError(input, `${getFieldName(input)} is required`);
} else {
showValid(input);
}
});
}
I tried to just target the type on the input instead of the id, but I run into another issue because the input type="text" displays "Text is required" when I want it to say "Username" so I need a method to be able to create any custom word + "is required"
So essentially I could customize it to say "WHATEVER is required"

add a data tag to the html elements you are targeting. and use it do display whatever you require to display.
refer to How to store arbitrary data for some HTML tags for details.

Form Validation through Jquery: This not working with Jquery Latest version of CDN (Content Delivery Network)?

This not working with Jquery Latest version of CDN (Content Delivery Network):
Validating HTML forms is a very important aspect during form submission. jQuery helps in validating forms at client side. The following steps are required to validate a form.
Step 1: Create a Simple HTML Form
To create the form use the following code.
<h1>Fill out your information</h1>
<form id="regForm" method="post">
<input type="text" name="fullname" id="fullname" placeholder="Your Full Name"/>
<input type="text" name="email" id="email" placeholder="Email ID"/>
<input type="text" name="mobileno" id="mobileno" id="mobileno" placeholder="Mobile Number" maxlength="10"/>
<input type="text" name="address" id="address" placeholder="Address"/>
<input type="password" name="password" id="password" value="" placeholder="Password"/>
<input type="password" name="repassword" id="repassword" value="" placeholder="RetypePassword"/>
<button name="submit" type="button" id="btnvalidate">Click to Submit</button>
</form>
This is the form view of the above code
Step 2: Include the Latest jQuery Library
The latest jquery library can be downloaded from https://jquery.com/. Add the latest library to the head section of HTML page.
Step 3: Add a Function to Validate Form
Add the jquery function within the "" tags in the HTML form. Use the following code to validate the form.
<script type="text/javascript">
//Find the values added in form using the id of each fields. The ".val()" function finds the value added in the form fields.
var fullname = $('#fullname').val();
var address = $('#address').val();
var mobileno = $('#mobileno').val();
var email = $('#email').val();
var indexat = email.indexOf("#"); //Index of "#" in the email field
var indexdot = email.indexOf("."); //Index of "." in the email field
var password = $('#password').val();
var repassword = $('#repassword').val();
//Function will execute when the button "Click to Submit" is clicked.
$('#btnvalidate').click(function() {
//Blank field validation of fullname, mobile no and address. The function will generate an alert message if "fullname" or "mobile no" or "address" field is blank
if(fullname == '')
{
alert('Please enter your Full Name');
$('#fullname').focus(); //The focus function will move the cursor to "fullname" field
}
else if(address == '')
{
alert('Please enter your Address');
$('#address').focus();
}
else if(mobileno == '')
{
alert('Please enter your Mobile Number');
$('#address').focus();
}
//Validation of valid email address. The function will generate an alert message if "email" field is blank or incorrect
else if(indexat < 1 || (indexdot-indexat) < 2)
{
alert('Please enter a valid Email Id');
$('#email').focus();
}
//Validation of password. The function will generate an alert message if "password" field is not same as "retype password".
else if(password == '' && password != repassword)
{
alert('Password and Retype password donot match');
$('#repassword').focus();
}
});
</script>

you have to get all the text field values inside your click event.

How to change button state in javascript

I need to code a function in Javacript that updates the button colour and enables it when all fields are valid.
See picture below to understand the user interaction with the form
When the admin wants to update an user the update button needs to be green only if the following apply
At least one edit button is enabled. (When the edit button is enabled the respective fields is deleted and the user can write something)
The field must be validated in real time
If I uncheck the field the script has to revalidate the other open fields. For Instance if the open field is blank the button should be red but if I close the field and another field was enabled and filled with valid text (lets assume just 1 character means valid) the button from red should turn green
Could you please help me to figure this out. I think a solution is to use the JQuery keyup function but it is restricted only to one field. I need instead something more global.
Is there a way in javascript to create a global button listener than be useful for this scenario
In addition when I turn on the password checkbox two fields are enabled and the button should be valid only if password is valid and it matches with confirmed password
Please see below a brief summary of the jsp page
I have omitted the small icons of the password fields and the bootstrap part of the code
<sf:form class="form-horizontal"
role="form"
id="formsubmit"
method="POST"
action="${pageContext.request.contextPath}/updateprofile"
commandName="user">
<sf:input type="text" class="form-control" value="${user.username}" path="username" readonly="true"></sf:input>
<input type="checkbox" class="form-control" name="email-checkbox" checked />
<sf:input id="emailInput" type="text" class="form-control" path="email" placeholder="Type Email" name="email" disabled="true" />
<input type="checkbox" class="form-control" name="first-name-checkbox" checked />
<sf:input id="nameInput" type="text" class="form-control" placeholder="Type First Name" path="firstName" name="firstName" disabled="true" />
<input type="checkbox" class="form-control" name="last-name-checkbox" checked />
<sf:input id="surnameInput" type="text" class="form-control" placeholder="Type Last Name" path="lastName" name="lastName" disabled="true" />
<input type="checkbox" class="form-control" name="password-checkbox" checked />
<input id="password" type="password" class="form-control" name="password" placeholder="Insert Password" disabled>
<input id="confirmpassword" type="password" class="form-control" name="confirmpassword" placeholder="Confirm Password" disabled>
<button id="updateUserBtn" type="submit" class="btn btn-danger" data-loading-text="Creating User..." disabled>Update User</button>
</sf:form>
My first attemp with javascript is below and it works only for the password fields but it is not connected with the edit button
$("input[type=password]").keyup(
function() {
var ucase = new RegExp("[A-Z]+");
var lcase = new RegExp("[a-z]+");
var num = new RegExp("[0-9]+");
if ($("#password").val().length >= 8) {
$("#8char").removeClass("glyphicon-remove");
$("#8char").addClass("glyphicon-ok");
$("#8char").css("color", "#00A41E");
} else {
$("#8char").removeClass("glyphicon-ok");
$("#8char").addClass("glyphicon-remove");
$("#8char").css("color", "#FF0004");
}
if (ucase.test($("#password").val())) {
$("#ucase").removeClass("glyphicon-remove");
$("#ucase").addClass("glyphicon-ok");
$("#ucase").css("color", "#00A41E");
} else {
$("#ucase").removeClass("glyphicon-ok");
$("#ucase").addClass("glyphicon-remove");
$("#ucase").css("color", "#FF0004");
}
if (lcase.test($("#password").val())) {
$("#lcase").removeClass("glyphicon-remove");
$("#lcase").addClass("glyphicon-ok");
$("#lcase").css("color", "#00A41E");
} else {
$("#lcase").removeClass("glyphicon-ok");
$("#lcase").addClass("glyphicon-remove");
$("#lcase").css("color", "#FF0004");
}
if (num.test($("#password").val())) {
$("#num").removeClass("glyphicon-remove");
$("#num").addClass("glyphicon-ok");
$("#num").css("color", "#00A41E");
} else {
$("#num").removeClass("glyphicon-ok");
$("#num").addClass("glyphicon-remove");
$("#num").css("color", "#FF0004");
}
if ($("#password").val() == $("#confirmpassword").val()
&& ($("#confirmpassword").val() != 0)) {
$("#pwmatch").removeClass("glyphicon-remove");
$("#pwmatch").addClass("glyphicon-ok");
$("#pwmatch").css("color", "#00A41E");
} else {
$("#pwmatch").removeClass("glyphicon-ok");
$("#pwmatch").addClass("glyphicon-remove");
$("#pwmatch").css("color", "#FF0004");
}
if ($("#password").val().length >= 8
&& ucase.test($("#password").val())
&& lcase.test($("#password").val())
&& num.test($("#password").val())
&& $("#password").val() == $("#confirmpassword").val()
&& ($("#confirmpassword").val() != 0)) {
$("#updateUserBtn").removeClass("btn-danger");
$("#updateUserBtn").addClass("btn-success");
$("#updateUserBtn").prop('disabled', false);
} else {
$("#updateUserBtn").removeClass("btn-success");
$("#updateUserBtn").addClass("btn-danger");
$("#updateUserBtn").prop('disabled', true);
}
});

A keyup handler attached to the form element will be called for any field within it having a keyup event. That is because most events bubble up through all their ancestors and can be listened for at any level.
Small example as requested :)
$("form").keyup(
function() {
// your existing code here
});
If you want to target only specific inputs for the changes, you could use a delegated handler instead attached to the form (this one is using the specific form id):
$("#formsubmit").on('keyup', 'input[type=text],input[type=password]',
function() {
// your existing code here
});
This applies the selector at event time so is quite efficient, and also means the this value will be the control that changed (if that is useful to you).
As a general jQuery guideline, only run selectors once and save the element. This is faster & shorter and usually more readable. Also you can chain most jQuery functions together.
e.g.
var $password = $("#password");
var $8char = $("#8char");
if ($password.val().length >= 8) {
$8char.removeClass("glyphicon-remove").addClass("glyphicon-ok").css("color", "#00A41E");

Does the following use of JavaScript to handle html <input> pose any risks?

I wanted to use a "self-labelled" input fields to accept username and passwords with javascript as shown below. UX-wise, it seems to be working well. However, since I'm changing the "type" of the password-input field upon focus/blur, I'm concerned if this will pose any kind of risk. It probably should not, but just want to be sure.
<form method="post" action="/login">
<fieldset>
<h3>Login</h3>
<input id="username" name="username" type="text" value="Username" onblur="if (this.value == '') { this.value = 'Username'; }" onfocus="if (this.value == 'Username') { this.value = ''; }"/>
<input id="password" name="password" type="text" value="Password " onblur="if (this.value == '') { this.value = 'Password '; this.type = 'text' }" onfocus="this.type = 'password'; if (this.value == 'Password ') { this.value = ''; }"/>
<input id="submit" name="submit" type="submit" value="Login"/>
</fieldset>
</form>

To do what you want, use input field placeholder:
<input type="password" placeholder="Password">
It will will work just fine in all modern browsers.
Have a look at DEMO in jsFiddle

I would suggest using the placeholder attribute since it does exactly what you are trying to do. There are also jquery/javascript components to emulate what placeholder does in the case of browsers that don't support html5.

For modern browser placeholder is perfect.No doubt.
But IE 7,8,9 as always lag.So no support for placeholders when it comes to IE<10.
Solution:This Polyfill will do exactly what you want.And its valid for all browsers.
https://github.com/parndt/jquery-html5-placeholder-shim/
http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html
Refer:The best placeholder polyfil script for ie7, ie8 and ie9

How to Stop Submitting Empty Fields in Input

I am using a subscribe news letter script by using MySQL and PHP. When the user enters the e-mail and clicks the button the e-mail is added to database.
The issue is that while clicking the button without entering an e-mail, the data base is updating with an empty record. How can I stop submitting the empty fields and force the user to enter an e-mail?
Here is my HTML:
<form id="myForm" action="update.php" method="post">
<input type="hidden" name="action" value="update" />
<input type="text" name="email" id="email" value="Enter your email here" onfocus="if (this.value == 'Enter your email here') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Enter your email here';}" onwebkitspeechchange="this.value = this.value.replace('Enter your email here','')"; style=" color:#999; font-size:1em;width:200px; font-style:italic; font-family:"Times New Roman", Times, serif;"/>
<input class="button" type="image" src="rss.png" />
</form>

Sounds to me like you need to do some form validation before you take the user input and insert it into your database. It's dangerous to do as you're doing.
Why not use one of the many plugins out there:
http://www.queness.com/post/10104/powerful-javascript-form-validation-plugins

This is a useful tutorial on using the jquery validation plugin: http://docs.jquery.com/Plugins/Validation
Ignore the styling in their example and focus on the core aspects. In your case, the most useful line is:
<input id="cemail" name="email" size="25" class="required email" />

Roughly, you would need to do something like..
var form = $('#mtForm');
$('input').change(function(){
if($((this).val() == ''){
form.unbind('submit').submit(function(){
return false;
});
}
else{
form.unbind('submit');
}
})

You should change the value attribute of your email field to a placeholder attribute. The onfocus, onwebkitspeechchange and onblur code can be removed from the email input tag.
You can use something like this to check for a blank field if that's the only type of validation you're after (below is written with jQuery).
$(function(){
$('#myForm').submit(function(e){
if ($('#email').val().trim() == "") {
// some sort of notification here
e.preventDefault();
return false;
}
});
});
​

Ideally, you would validate the form on the client side (javascript/JQuery) as well as the server side (php).
For clarity I will remove the inline code on your input box to get this:
<input type="text" name="email" id="email" value="Enter your email here" />
Note - You may use
placeholder='Enter your email here'
to get the prompt in your input box.
Client side validation using HTML5
Make a required field with email format validation:
<input type="email" name="email" id="email" value="Enter your email here" required="required"/>
Client side validation using javascript/JQuery - example.js
JQuery:
$('#email').bind('blur', function() {
if (!validateEmail($(this).val()) {
// Add errors to form or other logic such as disable submit
}
});
function validateEmail($email) {
var emailReg = /^([\w-\.]+#([\w-]+\.)+[\w-]{2,4})?$/;
return emailReg.test($email);
}
}
Server side validation - update.php
// Require the email
if (empty($_POST['email'])) {
$error_message = 'You must enter an email!';
} else if (!filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) {
$error_message = 'Invalid email format. Example: example#example.example';
} else { // If no errors, continue processing the form
// process the form, enter email
}
The HTML5 alone will prevent submission of the form, however only more recent browsers support HTML5.
Hope this is helpful!