Develop Reference

Phone Number Regex Validation error while showing/hiding Elements

I am working on a form where I am showing a div when a user submits the form and it checks if all the fields values are not blank. I have achieved that part and it is working fine.
Now the problem is when I am validating the phone number using regex, it is showing error but still displays the div and form is also submitted successfully. It should not get submit till the user enters a correct phone number, it gives an error and still, the form gets submitted. I know the error is there but I am not understanding where I am wrong. Please guide me.
function mySub() {
const user = document.getElementById('pmname').value.trim();
const uemail = document.getElementById('pmemail').value.trim();
const uphone = document.getElementById('pmphone').value.trim();
const uregx = /^[0-9]{10}$/;
const upmmb = uregx.test(uphone);
if (user == "" || uemail == "" || uphone == "" || upmmb == "") {
document.getElementById('agy').style.display = 'none';
alert("Enter Valid Mobile Number");
document.getElementById('pmphone').focus();
} else {
document.getElementById('agy').style.display = 'block';
}
}
#agy {
display: none;
}
<form method="post" action="#">
<div id="agy">
<div class="agent-details">
<div class="d-flex align-items-center">
<div class="agent-image">
<img class="rounded" src="#" alt="Jazz" width="70" height="70" />
</div>
<ul class="agent-information list-unstyled">
<li class="agent-name"><i class="houzez-icon icon-single-neutral mr-1"></i> Jazz</li>
<li class="agent-link">View Listings</li>
</ul>
</div>
</div>
</div>
<div class="form-group">
<input class="form-control" name="name" id="pmname" value="" type="text" placeholder="Name" />
</div>
<div class="form-group">
<input class="form-control" name="mobile" id="pmphone" value="" type="text" placeholder="Phone" />
</div>
<div class="form-group">
<input class="form-control" name="email" id="pmemail" value="" type="email" placeholder="Email" />
</div>
<div class="form-group form-group-textarea">
<textarea class="form-control hz-form-message" name="message" rows="4" placeholder="Message">Hello, I am interested in ...</textarea>
</div>
<div class="form-group">
<label class="control control--checkbox m-0 hz-terms-of-use">
<input type="checkbox" id="ppa" name="privacy_policy" checked="" />By submitting this form I agree to <a target="_blank" href="https://propertymakkerz.com/pm/property/sai-ashishkaranjadepanvel/">Terms of Use</a>
<span class="control__indicator"></span>
</label>
</div>
<div class="form_messages"></div>
<button type="button" class="houzez_agent_property_form btn btn-secondary btn-full-width" onclick="mySub()"><span class="btn-loader houzez-loader-js"></span> Send Message</button>
</form>

Not able to verify if input field is empty or not after clicking the sumbit button

I am basically checking to see if the input field(fullName) is empty or not. If it is empty, then I want to disable the submit button, and forcing the user to add text in the FullName field.
To achieve this scenario, I did the following(code below), but when testing, I am still able to click the submit button, even if the FullName field is empty. I am not sure, what I am doing wrong with the JavaScript code.
I am doing all of this inside an .htm file.
function checkform(form) {
if (form.FullName.value == "") {
alert("Please enter your name!");
form.FullName.focus();
return false;
}
return true;
}
<fieldset>
<div class="form-group">
<label class="" for="FullName">Name <span class="required">*</span></label>
<input id="FullName" name="FullName" type="text" class="form-control" placeholder="Your Name" tabindex="1">
</div>
</fieldset>

function checkform(form) {
if (form.FullName.value == "") {
alert("Please enter your name!");
form.FullName.focus();
return false;
} else {
return true;
}
}
<div id="Wrapp" class="container">
<div id="MyName" class="center">
<button id="btn_MyNamebutton" class="btn btn-namebtn">Sign In</button>
<fieldset>
<form name='form' id='form'>
<div class="form-group">
<label class="" for="FullName">Name <span class="required">*</span></label>
<input id="FullName" name="FullName" type="text" class="form-control" placeholder="Your Name" tabindex="1">
</div>
<!-- Button -->
<div class="form-group">
<button id="btn_sumbit" type="button" class="btn btn-namebtn" onclick='checkform(form)'>Sign up</button>
<button id="btn_clear" type="reset" class="btn">Cancel</button>
</div>
</form>
</fieldset>
</div>
</div>
Note:- You have not added form tag and onclick='checkform(form)' which created issue in your code.

Your JS is ok. There are some changes -
First, wrap the form content in a form with a name attribute of form.
Next, fire the checkform function on clicking the submit button.
Check the snippet below-
function checkform(form) {
if (form.FullName.value == "") {
alert("Please enter your name!");
form.FullName.focus();
return false;
}
return true;
}
<div id="Wrapp" class="container">
<div id="MyName" class="center">
<button id="btn_MyNamebutton" class="btn btn-namebtn">Sign In</button>
<form name="form">
<fieldset>
<div class="form-group">
<label class="" for="FullName">Name
<span class="required">*</span>
</label>
<input id="FullName" name="FullName" type="text" class="form-control" placeholder="Your Name" tabindex="1">
</div>
<!-- Button -->
<div class="form-group">
<button id="btn_sumbit" type="submit" class="btn btn-namebtn" onclick="checkform(document.form)">Sign up</button>
<button id="btn_clear" type="reset" class="btn">Cancel</button>
</div>
</fieldset>
</form>
</div>
</div>

Is this what you are attempting?
Onclick if value of input is empty then you will see alert and button will disable.
EDIT: Included comments in code.
//get FullName input by id
var FullName = document.getElementById("FullName");
//get button by id
var btn_submit = document.getElementById("btn_submit");
function checkform() {
//if FullName is empty then alert and disable button
if (FullName.value === "") {
alert("Please enter your name!");
btn_submit.disabled = true;
}
}
<div id="Wrapp" class="container">
<div id="MyName" class="center">
<button id="btn_MyNamebutton" class="btn btn-namebtn">Sign In</button>
<fieldset>
<div class="form-group">
<label class="" for="FullName">Name <span class="required">*</span></label>
<input id="FullName" name="FullName" type="text" class="form-control" placeholder="Your Name" tabindex="1">
</div>
<!-- Button -->
<div class="form-group">
<button onclick="checkform();" id="btn_submit" type="submit" class="btn btn-namebtn">Sign up</button>
<button id="btn_clear" type="reset" class="btn">Cancel</button>
</div>
</fieldset>
</div>
</div>

How to send localstorage with form

I have html form and localstorage
I need send data from localstorage and form on email
Now I am sending two letter :(
When user submit form I get two letter. First letter from form and second letter from localstorage
So, I want get one letter with localstorage and form
My form:
<form action="/send.php" id="form-cart-send" onsubmit="return sendCartdata();" method="post" enctype="multipart/form-data" required>
<div class="form_fields" data-count="3">
<div class="form_field" data-type="name" data-is-required="true">
<label class="field_title">Имя<i>*</i></label>
<div class="form_field_text">
<input type="text" class="form_field_text_input" name="name" autocomplete="off" required>
</div>
</div>
<div class="form_field" data-type="phone" data-is-required="1">
<label class="field_title">Телефон<i>*</i></label>
<div class="form_field_text">
<input type="tel" class="form_field_text_input form_phone" id="phone" name="phone" data-check="phone" autocomplete="off" required>
</div>
</div>
<div class="form_field" data-type="email" data-is-required="0">
<label class="field_title">Ваш e-mail</label>
<div class="form_field_text">
<input type="text" class="form_field_text_input" name="email" data-check="email" autocomplete="off" required>
</div>
</div>
</div>
<div class="form_fields_advanced"></div>
<div class="form_submit">
<a class="component-button form_field_submit filled squared" id="checkout" data-modal-id="cart_done">
<div class="btn-content">
<div class="form_submit_text">Заказать</div>
</div>
</a>
</div>
</form>
Script for localstorage:
<script>
function sendCartdata() {
var phone = document.getElementById("phone").value;
if (phone === '') {
alert("Заполните, пожалуйста, обязательные поля.");
return false;
} else {
setTimeout(function() {
var value = localStorage.getItem('cart');
jQuery.post("/cart-send.php", {
cart: value
}, function(data) {
}).fail(function() {
alert("Damn, something broke");
});
}, 100);
return false;
}
}
</script>

How to remove a class from input

I have a piece of JavaScript code that validates a form. If the input field is empty I'm adding the "empty" which puts a red background on the input field.
Is there a way to remove that class when the user clicks on the field?
I had tried this, but it did not work.
$('input').bind('blur', function(){
$(this).removeClass('empty');
});
function register()
{
var errornotice = "This field is required";
if(document.myForma.userid.value == '')
{
var id = $("#userid");
id.addClass("empty");
id.val(errornotice);
}
if(document.myForma.fullname.value == '')
{
var name = $("#fullname");
name.addClass("empty");
name.val(errornotice);
}
if($(":input").hasClass("empty"))
{
return false;
}
else
{
errornotice.hide();
return true;
}
$('input').bind('blur', function(){
$(this).removeClass('empty');
});
}
.empty
{
background:red;
color:#fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form role="form" action="index.php" method="post" id="apply-form input" onSubmit="return(register());" name="myForma">
<div class="form-group">
<label for="userN">User Name<span class="error">*</span></label>
<input type="text" name="userid" class="form-control" id="userid">
</div>
<div class="form-group">
<label for="fullname">Full name<span class="error">*</span></label>
<input type="text" id="fullname" name="fullname" class="form-control">
<p id="empty"></p>
</div>
<input type="submit" value="submit" id="submit">
</form>

It looks like you were on the right track by using on blur, but I would recommend using on focus and also change the text to the empty string. Also, the way it looks like you want your text to behave is more like a placeholder, so you may want to consider using that, but the code below doesn't use it.
function register()
{
var errornotice = "This field is required";
if(document.myForma.userid.value == '')
{
var id = $("#userid");
id.addClass("empty");
id.val(errornotice);
}
if(document.myForma.fullname.value == '')
{
var name = $("#fullname");
name.addClass("empty");
name.val(errornotice);
}
$('.form-control').bind('focus', function(){
$(this).val('');
$(this).removeClass('empty');
});
}
.empty
{
background:red;
color:#fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form role="form" action="index.php" method="post" id="apply-form input" onSubmit="return(register());" name="myForma">
<div class="form-group">
<label for="userN">User Name<span class="error">*</span></label>
<input type="text" name="userid" class="form-control" id="userid">
</div>
<div class="form-group">
<label for="fullname">Full name<span class="error">*</span></label>
<input type="text" id="fullname" name="fullname" class="form-control">
<p id="empty"></p>
</div>
<input type="submit" value="submit" id="submit">
</form>

You can use the focus() method to remove the class when the user clicks on this control. This will work with a mouse and a keyboard as well.
$('input[type="text"]').focus(function(){
$(this).removeClass('empty').val('');
});
function register()
{
var errornotice = "This field is required";
if(document.myForma.userid.value == '')
{
var id = $("#userid");
id.addClass("empty");
id.val(errornotice);
}
if(document.myForma.fullname.value == '')
{
var name = $("#fullname");
name.addClass("empty");
name.val(errornotice);
}
if($(":input").hasClass("empty"))
{
return false;
}
else
{
errornotice.hide();
return true;
}
}
$('input[type="text"]').focus(function(){
$(this).removeClass('empty').val('');
});
.empty
{
background:red;
color:#fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form role="form" action="index.php" method="post" id="apply-form input" onSubmit="return(register());" name="myForma">
<div class="form-group">
<label for="userN">User Name<span class="error">*</span></label>
<input type="text" name="userid" class="form-control" id="userid">
</div>
<div class="form-group">
<label for="fullname">Full name<span class="error">*</span></label>
<input type="text" id="fullname" name="fullname" class="form-control">
<p id="empty"></p>
</div>
<input type="submit" value="submit" id="submit">
</form>

function register()
{
var errornotice = "This field is required";
if(document.myForma.userid.value == '')
{
var id = $("#userid");
id.addClass("empty");
id.val(errornotice);
}
if(document.myForma.fullname.value == '')
{
var name = $("#fullname");
name.addClass("empty");
name.val(errornotice);
}
if($(":input").hasClass("empty"))
{
return false;
}
else
{
errornotice.hide();
return true;
}
}
$('input[type="text"]').bind('focus', function(){
$(this).removeClass('empty').val('');
});
.empty
{
background:red;
color:#fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form role="form" action="index.php" method="post" id="apply-form input" onSubmit="return(register());" name="myForma">
<div class="form-group">
<label for="userN">User Name<span class="error">*</span></label>
<input type="text" name="userid" class="form-control" id="userid">
</div>
<div class="form-group">
<label for="fullname">Full name<span class="error">*</span></label>
<input type="text" id="fullname" name="fullname" class="form-control">
<p id="empty"></p>
</div>
<input type="submit" value="submit" id="submit">
</form>

Allow only x number of form fields to be filled in

I have a very noob question, I have a form with input fields. The form has 10 fields, and the user needs to enter from 1-3 (one being most preferred, to 3 being last choice). After 3 have been filled, I want to either disable all other fields, or just disallow any further input and give an error.
I've got the counting up working, but i can't restrict or pop an error.
here's the code,
jQuery(document).ready(function($){
$("#choices").on('keyup change', function() {
var maxAllowed = 3;
var number = 0;
$(this).find('input, textarea').each(function () {
//if (number < maxAllowed && this.value !== '')
if (this.value !== '')
{
$('.input_count').val(number++);
}
});
});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-12">
<form method="post" id="userForm" role="form">
<h3>Selection form</h3>
<p>Fill in your choices from 1-3 (please select only three).</p>
<div id="choices">
<div class="form-group">
<label for="Recreational fishing">Recreational fishing</label>
<input type="text" value="" size="3" name="form[Recreational fishing]" id="Recreational fishing" class="form-control" />
</div>
<div class="form-group">
<label for="Recreational boating">Recreational boating</label>
<input type="text" value="" size="3" name="form[Recreational boating]" id="Recreational boating" class="form-control" />
</div>
<div class="form-group">
<label for="Sightseeing tourist">Sightseeing tourist</label>
<input type="text" value="" size="3" name="form[Sightseeing tourist]" id="Sightseeing tourist" class="form-control" />
</div>
<div class="form-group">
<label for="Exercise">Exercise</label>
<input type="text" value="" size="3" name="form[Exercise]" id="Exercise" class="form-control" />
</div>
<div class="form-group">
<label for="Picnics BBQ">Picnics/BBQ</label>
<input type="text" value="" size="3" name="form[Picnics BBQ]" id="Picnics BBQ" class="form-control" />
</div>
<div class="form-group">
<label for="Sunsets and socialising">Sunsets and socialising</label>
<input type="text" value="" size="3" name="form[Sunsets and socialising]" id="Sunsets and socialising" class="form-control" />
</div>
<div class="form-group">
<label for="Bird watching">Bird watching</label>
<input type="text" value="" size="3" name="form[Bird watching]" id="Bird watching" class="form-control" />
</div>
<div class="alert alert-info">
<div class="form-group">
<label for="counter">Counter:</label>
<input class="input_count form-control" type="text" id="counter" value="">
</div>
</div>
</div>
<input type="submit" value="Submit" name="form[Submit]" id="Submit" class="btn btn-primary btn-block">
</form>
</div>
</div>
.... or here's a fiddle.
http://jsfiddle.net/Flocktome/wmdnnm4j/
any thoughts would be really appreciated. Thanks in advance.

jQuery(document).ready(function($){
$("#choices").on('keyup change', function() {
var maxAllowed = 4;
var number_done = 0;
$(this).find('input, textarea').removeAttr('disabled');
$(this).find('input, textarea').each(function () {
//if (number < maxAllowed && this.value !== '')
if (this.value !== '')
{
$('.input_count').val(++number_done);
}
});
if( number_done >= maxAllowed){
$(this).find('input,textarea').filter(function(){
if($(this).val()== '')
return true;
return false;
}).attr('disabled', 'disabled');
}
});
});
Here the max allowed is set to 4.because of you counter field.Which should be ingnored i think for the test purpose.Once this field is removed the maxallwoed can be set as 3

Try this code. I have found number of fields filled using filter function and disabled other fields using each, when the maximum number of fields allowed are filled. JSFiddle
jQuery(document).ready(function($){
$("#choices").on('keyup', function() {
var maxAllowed = 3;
var els = $(this).find('input, textarea');
var elsFilled = els.filter(function(i,el){ return el.value!="" }).length;
if(elsFilled==maxAllowed)
els.each(function(i,el){ if(el.value=="") el.disabled = true; });
else
els.each(function(i,el){ if(el.value=="") el.disabled = false; });
});
});