Develop Reference

validation error message did not show correctly for related inputs

my validation error message didnot show correctly.for example I insert value on Name input but validation error message of email was shown or when I insert value on phone input,validation of email was shown.I want when I insert value in specific input only the validation error message of it was shown.
<form class="contactForm" onsubmit="return validateContactForm();">
<div class="form-group">
<label for="name" class="label-login">Name</label>
<input type="text" class="form-control" id="name" autocomplete="off" />
<span id="namespan" class="text-danger"></span>
<i class="fa fa-user"></i>
</div>
<div class="form-group">
<label for="email" class="label-login">email</label>
<input type="email" class="form-control" id="email" autocomplete="off" />
<span id="emailspan" class="text-danger"></span>
<i class="fa fa-envelope"></i>
</div>
<div class="form-group">
<label for="phone" class="label-login">tell number </label>
<input type="text" class="form-control" id="phone" autocomplete="off" />
<span id="tellspan" class="text-danger"></span>
<i class="fa fa-phone"></i>
</div>
<div class="form-group">
<label for="message" class="label-login label-message">message</label>
<textarea class="form-control" rows="3" id="message" autocomplete="off"></textarea>
<span id="messagespan" class="text-danger"></span>
</div>
<div class="form-group">
<input type="submit" class="btn btn-send center-block" value="send/>
</div>
</form>
$(document).ready(function () {
$(".contactForm input,.contactForm textarea").each(function () {
$(this).keyup(function () {
var pt = /^[\w.]+#[a-z0-9-]+\.[a-z]{2,6}/i;
if (!pt.test($("#email").val())) {
$("#emailspan").html("insert email correctly");
}
else {
$("#emailspan").text("");
}
if ($("#name").val().length < 3) {
$("#namespan").html("insert name correctly");
}
else {
$("#namespan").text("");
}
if ($("#phone").val().length < 12) {
$("#tellspan").html("insert phone correctly");
}
else {
$("#tellspan").text("");
}
if ($("#message").val().trim().length < 3) {
$("#messagespan").html("insert message correctly");
}
else {
$("#messagespan").text("");
}
});
});
});
function validateContactForm() {
var bool = true;
var pt = /^[\w.]+#[a-z0-9-]+\.[a-z]{2,6}/i;
if (!pt.test($("#email").val())) {
bool = false;
$("#emailspan").html("insert email correctly");
}
if ($("#name").val().length < 3) {
bool = false;
$("#namespan").html("insert name correctly");
}
if ($("#phone").val().length < 12 ) {
bool = false;
$("#tellspan").html("insert tell correctly");
}
if ($("#message").val().trim().length < 3) {
bool = false;
$("#messageSpan").html("insert message correctly");
}
return bool;
}

I found some issue in the form and updated here
Form send button does not close properly
.contactFormnot not added on form tag
$(document).ready(function () {
$(".contactForm input,.contactForm textarea").each(function () {
$(this).keyup(function () {
var pt = /^[\w.]+#[a-z0-9-]+\.[a-z]{2,6}/i;
if (!pt.test($("#email").val())) {
$("#emailspan").html("insert email correctly");
} else {
$("#emailspan").text("");
}
if ($("#name").val().length < 3) {
$("#namespan").html("insert name correctly");
} else {
$("#namespan").text("");
}
if ($("#phone").val().length < 12) {
$("#tellspan").html("insert phone correctly");
} else {
$("#tellspan").text("");
}
if ($("#message").val().trim().length < 3) {
$("#messagespan").html("insert message correctly");
} else {
$("#messagespan").text("");
}
});
});
});
function validateContactForm() {
var bool = true;
var pt = /^[\w.]+#[a-z0-9-]+\.[a-z]{2,6}/i;
if (!pt.test($("#email").val())) {
bool = false;
$("#emailspan").html("insert email correctly");
}
if ($("#name").val().length < 3) {
bool = false;
$("#namespan").html("insert name correctly");
}
if ($("#phone").val().length < 12) {
bool = false;
$("#tellspan").html("insert tell correctly");
}
if ($("#message").val().trim().length < 3) {
bool = false;
$("#messageSpan").html("insert message correctly");
}
return bool;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="contactForm" onsubmit="return validateContactForm();">
<div class="form-group">
<label for="name" class="label-login">Name</label>
<input type="text" class="form-control" id="name" autocomplete="off" />
<span id="namespan" class="text-danger"></span>
<i class="fa fa-user"></i>
</div>
<div class="form-group">
<label for="email" class="label-login">email</label>
<input type="email" class="form-control" id="email" autocomplete="off" />
<span id="emailspan" class="text-danger"></span>
<i class="fa fa-envelope"></i>
</div>
<div class="form-group">
<label for="phone" class="label-login">tell number </label>
<input type="text" class="form-control" id="phone" autocomplete="off" />
<span id="tellspan" class="text-danger"></span>
<i class="fa fa-phone"></i>
</div>
<div class="form-group">
<label for="message" class="label-login label-message">message</label>
<textarea class="form-control" rows="3" id="message" autocomplete="off"></textarea>
<span id="messagespan" class="text-danger"></span>
</div>
<div class="form-group">
<input type="submit" class="btn btn-send center-block" value="send" />
</div>
</form>

You always make validations all together. So whenever a keyup is made on any field, all validations take place.
To avoid this you can proceed in at least 2 ways.
Way 1
You can check the id of the element which fired the event and validate only that field logic. You'll mantain an unique function, adding an if for each field validation
Ex.
$(".contactForm input,.contactForm textarea").each(function () {
$(this).keyup(function () {
var pt = /^[\w.]+#[a-z0-9-]+\.[a-z]{2,6}/i;
var id=$(this).attr("id");
if(id==="email"){
if (!pt.test($("#email").val())) {
$("#emailspan").html("insert email correctly");
}
else {
$("#emailspan").text("");
}
}
...
and so on for each field..
Way 2
Alternatively you can make and handler function for each specific field, removing $(".contactForm input,.contactForm textarea").each(function () {.
Ex.
$("#name").keyup(function () {
if ($(this).val().length < 3) {
$("#namespan").html("insert name correctly");
}
else {
$("#namespan").text("");
}
});
.....
and so on for each field

Registration and validation form with angularjs

I have a problem with a registration form on angularjs, I want to controle the form before submit and how can i save user data in text file or json (any solution for saving data), I did not manage to do it.
For more information, I am working on a project : Interface for ReafctorErl public server - javascript (angular based).
registration.html :
<div class="register">
<div class="box">
<h4> Sign Up</h4>
<p> Enter your personal details below: </p>
</br>
<form role="frmRegister" name="frmRegister" ng-submit="register()" >
<div class="form-group">
<input class="form-control" type="text" id="fullname" placeholder="Full Name" ng-model="credentials.fullname"/>
</div>
<div class="form-group">
<input class="form-control" type="text" id="organisation :" placeholder="Organisation" ng-model="credentials.organisation" />
</div>
<div class="form-group">
<input class="form-control" type="text" id="address :" placeholder="Address" ng-model="credentials.address" />
</div>
<p> Enter your account details below: </p>
<div class="form-group">
<input class="form-control" type="email" id="email" placeholder="Email" ng-model="credentials.email" />
</div>
<div class="form-group">
<input class="form-control" type="text" id="username" placeholder="Username" ng-model="credentials.username" />
</div>
<div class="form-group" >
<input class="form-control" type="password" id="password" placeholder="Password" ng-model="credentials.password" />
</div>
<div class="form-group" >
<input class="form-control" type="password" id="password_again" placeholder="Password again" ng-model="credentials.password_again" />
</div>
<div class="form-actions">
Back
<button type="submit" class="btn btn-primary" onclick="return verif();">Submit</button>
</div>
</br>
</form>
</div>
</div>
<script language="javascript">
function verif(){
if (document.getElementById('password').value != document.getElementById('password_again').value) {
document.getElementById('password_again').setCustomValidity('Passwords must match.');
}
else {
document.getElementById('password_again').setCustomValidity('');
}
}
</script>
the controller file :
'use strict';
function RegisterCtrl($scope, reg) {
var credentials = {
fullname: "",
organisation: "",
address: "",
email: "",
username: "",
password: "",
password_again: ""
};
$scope.credentials = credentials;
$scope.restricted = window.restrictedMode;
$scope.register = function() {
if( $scope.frmRegister.fullname.length<1 ) {
alert("Full Name required!");
return false;
}
if( $scope.credentials.organisation.length<1 ) {
alert("Organisation required!");
return false;
}
if( $scope.credentials.address.length<1 ) {
alert("Address required!");
return false;
}
if( $scope.credentials.email.length<1 ) {
alert("Email required!");
return false;
}
if( $scope.credentials.username.length<1 ) {
alert("Username required!");
return false;
}
if( $scope.credentials.password.length<3 ) {
alert("Password required!");
return false;
}
if( $scope.credentials.password_again.length<3 ) {
alert("Password again required!");
return false;
}
reg.register($scope.credentials.fullname, $scope.credentials.organisation, $scope.credentials.address,
$scope.credentials.email, $scope.credentials.username, $scope.credentials.password, $scope.credentials.password_again, true);
};
}
Service file is :
'use strict';
/*just trying todo something here */
angular.module('referl.services').service('reg', function($q, $http, $location, $rootScope, $window) {
var reg = {
register: function(fullname, organisation, address, email, username, password, password_again, navigateOnSuccess) {
var parameters = {
fullname: fullname,
organisation: organisation,
address: address,
email: email,
username: username,
password: password,
password_again: password_again
};
$http.get("api/register", {params: parameters}).success(function(response) {
if(response.error) {
alert(response.error);
} else {
alert("Success");
}
});
}
};
$rootScope.reg = reg;
return reg;
});
Any help please ??
Thank you!

Better to follow https://docs.angularjs.org/guide/forms for html page that will reduce your angular controller code. and you can focus on service validation
Follow Binding to form and control state section of above link how to validate form.

To your input text's u can use: ng-pattern and attribute required
<form name="exampleForm" class="form-horizontal">
<div class="form-group">
<input class="form-control" type="text" id="fullname" placeholder="Full Name" ng-model="credentials.fullname" ng-pattern="INSERT PATTERN" required/>
</div>
</form>
to find patterns you can see here:
HTML5 pattern
and for valite the whole form
<button class="btn btn-primary" ng-click="myFunction()" ng-disabled="exampleForm.$invalid">Button</button>

Enable next form element with the value of previous

I do need to create a form. In that form I need to enable form element one by one. That mean, If an user entered valid data to first element then I want to autofocus next element and so on.
NOTE: When page is load I want to keep all the elements disable except first element.
This is HTML of my form.
<form role="form" class="banner" method="post" action="">
<div class="form-group">
<div class="icon-addon addon-md">
<input type="text" name="name" placeholder="Your Name" class="form-control first-name sequence" autocomplete="off" required>
<label for="name" class="glyphicon glyphicon-user" data-toggle="tooltip" data-placement="left" title="Enter Your Name"></label>
</div>
</div>
<div class="form-group">
<div class="icon-addon addon-md">
<input type="email" name="email" placeholder="Your Email" class="form-control email_address sequence" autocomplete="off" disabled required>
<label for="email" class="glyphicon glyphicon-envelope" rel="tooltip" title="Enter Your Email"></label>
<span class="email-error"></span>
</div>
</div>
<div class="form-group">
<div class="icon-addon addon-md">
<input type="text" name="phone" placeholder="Your Phone Number Eg: xx-xxx-xxx" class="form-control phone-number sequence" autocomplete="off" disabled required>
<label for="email" class="glyphicon glyphicon-phone" rel="tooltip" title="Enter Your Phone Number"></label>
</div>
</div>
<div class="element-left">
<div class="form-group">
<div class="icon-addon addon-md">
<input type="text" name="charter-date" placeholder="Pick Up Date" class="form-control datepicker sequence" autocomplete="off">
<label for="date" class="glyphicon glyphicon-calendar" rel="tooltip" title="Prefered Charter Date"></label>
</div>
</div>
</div>
<div class="element-right">
<div class="form-group">
<div class="icon-addon addon-md">
<input type="text" name="charter-time" placeholder="Pick Up Time" class="form-control timepicker sequence" autocomplete="off">
<label for="time" class="glyphicon glyphicon-time" rel="tooltip" title="Time of Charter"></label>
</div>
</div>
</div>
<p class="form-actions">
<button type="submit" name="submit" class="btn btn-default btn-block">
<span class="btn-orange-inner">Send</span>
</button>
</p>
</form>
This is how I tried it in jQuery:
// form validation
function fakeValidator(event) {
var flag = false;
var $element = $(event.target);
var values = $element.val();
if (values.length >= 3) {
if($element.hasClass('email_address')) {
if(validemail(values)){
flag = true ;
}else{
flag =false;
}
}
flag =true;
} else {
flag =false;
}
if(flag){
//alert('hi');
$element.addClass('valid');
enableNextElement(event);
} else{
alert('hi el');
$element.removeClass('valid');
//$element.addAttr('disabled');
}
}
function validemail(value){
var emailReg ="/^([a-zA-Z0-9_.+-])+\#(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/";
}
function enableNextElement(event) {
var $element = $(event.target);
if ($element.hasClass('valid')) {
$element.closest('.form-group')
.next('.form-group')
.find('.sequence')
.removeAttr('disabled');
}
}
$('.sequence').on('blur keyup', fakeValidator);
But my problem is, if I entered an invalid email next element is enabling. But I want to enable next element if its a valid email in email field.
Can anybody tell me what is wrong with this?
Thank you.

2 things:
You should return true or false from your email validation function i.e. validemail
Your regex is stored as string, and hence you cannot apply test function on it. Remove wrapping it in " "
Above mentioned changes will give you desired result.
function validemail(value){
var emailReg =/^([a-zA-Z0-9_.+-])+\#(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/; //regex
return emailReg.test(value); //use test which returns true or false
}
UPDATE
DEMO
It will still enable the phonenumber because you have validation written in such a way.
Your Validation:
if (values.length >= 3) {
//this is ok for name
if($element.hasClass('email_address')) {
if(validemail(values)){
flag = true;
}else{
flag =false;//even though flag is false here
}
}
flag =true; //when it comes to this line it again makes it to true
//and for email along with length>3, valid email address has also to be validated
} else {
flag =false;
}
My workaround
if (values.length >= 3) {
flag =true; //set this first
if($element.hasClass('email_address')) {//then perform other validations
if(validemail(values)){
flag = true ;
}else{
flag =false;
}
}
} else {
flag =false;
}

Get value from javascript

I have to get id from table data (SQL).
Below is a form, in which I have to get proper id. But in JavaScript I don't get id from more data. I am getting only same data id from table.
please tell me how to get id from table in SQL
HTML Form:
<div>
<textarea name="comment" id="comment1" class="form-control comment" rows="3" placeholder="Leave comment"></textarea>
<input type="hidden" id="cid1" value="<?php echo $ws1['forum_id']; ?>">
</div>
<input class="btn btn btn-noc" type="submit" value="Submit" id="addressSearch" href="#myModalnew" role="button" data-toggle="modal">
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="inputEmail">User name</label>
<div class="controls">
<input type="text" id="username" placeholder="User name">
<p id="username_error" class="validation"></p>
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputEmail">Email id</label>
<div class="controls">
<input type="text" id="email" placeholder="Email id">
<p id="email_error" class="validation"></p>
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputEmail">Mobile no</label>
<div class="controls">
<input type="text" id="phone" placeholder="Mobile no">
<p id="phone_error" class="validation"></p>
</div>
</div>
<div class="control-group">
<div class="controls">
<input type="button" class="btn btn-nocone" value="Submit" onClick="xxx()">
</div>
</div>
</form>
Javascript:
function xxx() {
regexp=/^([a-zA-Z0-9_\.\-])+\#(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
regexp1=/^\d{10}$/;
function showError(id, msg) {
if (msg != "") {
document.getElementById(id).innerHTML = '*' + msg;
}
else {
document.getElementById(id).innerHTML = msg;
}
}
err = '';
var username = document.getElementById("username").value;
if (username == "" || username == null) {
showError('username_error', 'Please Fill Name');
err = 1;
} else {
showError('username_error', '');
}
var email = document.getElementById("email").value;
if (!regexp.test(email)) {
showError('email_error', 'Please Fill valid Email address.');
err = 2;
} else {
showError('email_error', '');
}
var phone = document.getElementById("phone").value;
if (!regexp1.test(phone)) {
showError('phone_error', 'Please Fill valid Phone Number.');
err = 3;
} else {
showError('phone_error', '');
}
if(err!=''){
return false
}
else {
cmnt = document.getElementById('comment').value;
usr = document.getElementById('username').value;
emil = document.getElementById('email').value;
phn = document.getElementById('phone').value;
fid = document.getElementById('cid').value;
$.ajax({
type: "POST",
url:'submit_form/insert_comment.php',
dataType: "html",
cache: false,
async: false,
data: {
comment: cmnt,
username: usr,
email:emil,
phone:phn,
id: fid
}
});
}
showError('error','Your comment have been sent sucessfully');
$("#please").click();
}

How to make input.error work on all fields?

http://jsfiddle.net/Nvt2h/
I am using this script which sends details from input fields to my email. As you can see, there is input.error which highlights the field in red if there is an incorrect entry. However, this currently works only for Field 1 and Field 4.
How can I make this work on field 2 and 3 as well ?
<form id="contact" name="contact" action="#" method="post">
<div class="form-group">
<label for="msg">Field1:
</label>
<input name="msg" type="msg" class="form-control" id="msg">
</div>
<div class="form-group">
<label for="id">Field2:</label>
<input name="id" type="msg" class="form-control" id="msg">
</div>
<div class="form-group">
<label for="pb">Field3:
</label>
<input name="pb" type="msg" class="form-control" id="pb">
</div>
<div class="form-group">
<label for="email">Field4:</label>
<input name="email" type="email" class="form-control" id="email">
</div>
<button id="send">Submit</button>

Add a minlength attribute to those input fields
<input name="msg" type="msg" class="form-control msg" id="msg" minlength="2">
then
function validateEmail(email) {
var reg = /^(([^<>()[\]\\.,;:\s#\"]+(\.[^<>()[\]\\.,;:\s#\"]+)*)|(\".+\"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return reg.test(email);
}
$(document).ready(function () {
//$(".modalbox").fancybox();
$("#contact").submit(function () {
return false;
});
$("#send").on("click", function () {
$('#contact input.error').removeClass('error');
var emailval = $("#email").val();
var mailvalid = validateEmail(emailval);
if (mailvalid == false) {
$("#email").addClass("error");
}
var minlen = $('#contact input[minlength]').filter(function(){
return this.value.length < +$(this).attr('minlength')
}).addClass('error').length;
if (mailvalid == true && minlen == 0) {
// if both validate we attempt to send the e-mail
// first we hide the submit btn so the user doesnt click twice
$("#send").replaceWith("<p><strong>Sending, please wait...</strong></p>");
$.ajax({
type: 'POST',
url: 'send.php',
data: $("#contact").serialize(),
dataType: 'jsonp',
success: function (data) {
if (data.result == true) {
$("#contact").fadeOut("fast", function () {
$(this).before("<p class='success'><strong>Thank you, your message has been sent. We will be in touch shortly.</strong></p>");
});
} else { /* if you want to handle mail send failed, put it here */
}
},
error: function (jqXHR, textStatus, errorThrown) {
// this is triggered if there's a problem getting the jsonp back from the server
}
});
}
});
});
Demo: Fiddle