We Keep Coding

Error message will not display after changing the type for a button in form

So I am trying to add validation to a form. Initially, for the button, I had the type as submit, but when I would click on the button the error message for an empty name input would display briefly. I did some research and saw that in order to get the error message to display longer, I needed to change the type to button, which I did. Now, no error messages are showing. I checked the console and there are no errors displaying. Can someone tell me why this is happening and how to fix it?
function printError(elemId, message) {
document.getElementById(elemId).innerHTML = message;
}
function validateForm() {
var name = document.regForm.FullName.value;
var nameError = true;
if (name == "") {
printError("nameError", "Please enter your name")
}
};
.error {
color: red;
font-size: 90%;
}
<div class="container">
<form name="regForm" class="form" onsubmit="return validateForm()">
<fieldset>
<div class="row">
<label>Full Name</label></br>
<input name="FullName" type="text" placeholder="John Doe" id="FullName" />
<div class="error" id="nameError"></div>
</div>
<div class="row">
<label>Email</label></br>
<input name="email" type="email" placeholder="johndoe#email.com" id="Email" />
<div class="error" id="emailError"></div>
</div>
<div class="row">
<label>Phone Number</label></br>
<input name="phone" type="tel" placeholder="(123) 456-7890" id="PhoneNumber" />
</div>
<div class="row">
<label>Password</label></br>
<input name="Password" id="Password" type="Password" placeholder="Password" onchange='passConfirm();' />
</div>
<div class="row">
<label>Confirm Password</label></br>
<input name="ConfirmPassword" id="ConfirmPassword" type="Password" placeholder="Confirm Password" onchange='passConfirm();' />
</div>
<span id="Message"></span>
<button type="button" value="submit">Sign Me Up!</button>
</fieldset>
</form>
</div>

When the button type is submit the form gets submitted automatically and the function called validation is executed. But when you change the type to button the function will not be called. You have to add click event listener to the sign me up button to call the validate function.
jsFiddle

Onclick Cancel application event

new to js...need your help. I want to create a cancel button that cancels an online form session when the cancel button is clicked. Before cancelling the session, I want a notification popup to appear (onclick event) asking for the user's confirmation before cancelling the application session. See code below:
<form>
<div class="form-group">
<label for="Product">Product</label>
<input type="text" name="product" id="product" required="required" value="">
</div>
<div class="form-group">
<label for="Product">Product1</label>
<input type="text" name="product1" id="product1" required="required" value="">
</div>
<div class="form-group">
<label for="Product">Product2</label>
<input type="text" name="product2" id="product2" required="required" value="">
</div>
<div>
<button name="submit">Add Product</span></button> **Cancel**
</div>
</form>

First you need on click confirm function which will ask user approve before continue
**Cancel**
<script>
function confirmCancel () {
var message = "Are you sure?";
if (confirm(message)) {
// do what you want
}
}
</script>

<form id='form1'>
<div class="form-group">
<label for="Product">Product</label> <input type="text" name="product" id="product" required="required" value=""> </div>
<div class="form-group">
<label for="Product">Product1</label> <input type="text" name="product1" id="product1" required="required" value=""> </div>
<div class="form-group"> <label for="Product">Product2</label> <input type="text" name="product2" id="product2" required="required" value=""> </div>
<div>
<button name="submit">Add Product</span></button>
**Cancel** </div>
</form>
<script>
function(id){
if(confirm("do you want to cancel?")){
$("#"+id)[0].reset();
}
}
</script
>

Without editing the form select the element, attach an 'click' event listener to the element you want to listen in on, in this case, "cancel" a tag. Once the click is registered confirm using a confirm box. if Ok grab the form and reset it and redirect the user. Else, do something else.
// grab your cancel anchor tag
var anchor = document.querySelector("[href='http://www.google.com']");
// grab your form
var form = document.getElementsByTagName('form')[0];
// add an event listener on to your cancle anchor tag
anchor.addEventListener('click',clicked =>{
// assign your confirm to varable yes
var yes = confirm('are you sure you want to cancle');
if(yes===true){
// if they confirm their departure reset the form
form.reset();
//alert them of a successfull form reset and inform them of the reroute
alert('the form has been reset you are going to be rerouted to google');
// use location to reroute to a different domain
//window.location.href("http://www.google.com")
// or within the current domain using a relative path
// window.location.href = '../' one level up
// winsow.location.href = '/path' relative to a domain
}else{
alert('you decided to cancle');
// do nothing
}
});
<form>
<div class="form-group">
<label for="Product">Product</label>
<input type="text" name="product" id="product" required="required" value="">
</div>
<div class="form-group">
<label for="Product">Product1</label>
<input type="text" name="product1" id="product1" required="required" value="">
</div>
<div class="form-group">
<label for="Product">Product2</label>
<input type="text" name="product2" id="product2" required="required" value="">
</div>
<div>
<button name="submit">Add Product</span></button> **Cancel**
</div>
</form>

Focus event not working in HTML form

My HTML code is
<body>
<form name="contactus" id='contactus' action="test1.php" method="post" enctype="multipart/form-data">
<input type="hidden" value="2" name="Tab" id="Tab">
<div class="row underlinDv">
<div class="col-sm-4">
Your Email :
</div>
<div class="col-sm-8">
<input maxlength="100" type="email" class="form-control" placeholder="Enter Email" name="UEmailLogin" id="UEmailLogin" minlength="3">
</div>
</div>
<!--18-->
<div class="row underlinDv">
<div class="col-sm-8 col-md-offset-4">
<input type="submit" id="demo2GetTags" class="btn btn-primary btn-md" value="Submit" onclick='search()' />
</div>
</div>
</form>
<script>
function search() {
var Tab = document.getElementById("Tab").value;
alert(Tab);
var Eamillogin = document.getElementById("UEmailLogin").value;
if (Eamillogin == "") {
alert("please enter email");
Eamillogin.focus();
}
}
</script>
</body>
When I click on submit button, JavaScript alert shows "please enter email". It works fine. But Eamillogin.focus(); not working. After showing alert, the form automatically direct to test1.php page.Pointer not focus on Email. How to correct it?

Eamillogin variable contains the value of the #UEmailLogin element.
To set the focus on the element, use element.focus();
Here's updated code
var Eamillogin = document.getElementById("UEmailLogin"); // Removed .value from here
if (Eamillogin.value === "") { // Added .value here
alert("please enter email");
Eamillogin.focus(); // Focus element
}
function search() {
var Tab = document.getElementById("Tab").value;
var Eamillogin = document.getElementById("UEmailLogin");
if (Eamillogin.value === "") {
alert("please enter email");
Eamillogin.focus();
}
}
<form name="contactus" id='contactus' action="test1.php" method="post" enctype="multipart/form-data">
<input type="hidden" value="2" name="Tab" id="Tab">
<div class="row underlinDv">
<div class="col-sm-4">
Your Email :
</div>
<div class="col-sm-8">
<input maxlength="100" type="email" class="form-control" placeholder="Enter Email" name="UEmailLogin" id="UEmailLogin" minlength="3">
</div>
</div>
<!--18-->
<div class="row underlinDv">
<div class="col-sm-8 col-md-offset-4">
<input type="submit" id="demo2GetTags" class="btn btn-primary btn-md" value="Submit" onclick='search()' />
</div>
</div>
</form>

How to hide/show a text-box base on other text-box in Laravel 4?

Goal
show email confirm when a user start editing the email section.
hide the email confirm text-box if the user doesn't touch it.
Don't do anything if the user only edit the username part.
Edit Form
username* __________________________
email* __________________________
email confirm* _____________________
HTML/BLADE
<div class="form-group">
<label class="col-sm-3 control-label required ">Username </label>
<div class="col-sm-9 form-group float-label-control ">
{{ Form::text('username', isset($user->username) ? $user->username : '' , array('id'=>'form-field-icon-2')); }}
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label required ">Email </label>
<div class="col-sm-9 form-group float-label-control ">
{{ Form::text('email', isset($user->email ) ? $user->email : '' , array('id'=>'form-field-icon-2')); }}
</div>
</div>

HTML
<label> Username </label><br>
<input type="text" name="username"><br>
<label> Email </label><br>
<input type="text" name="email" id="email"><br>
<label id="l-email-conf" > Email Confirm </label><br>
<input type="text" name="email_confirm" disabled="disabled" id="email-conf">
JS
$('#l-email-conf').hide();
$('#email-conf').hide();
$('#email').on('input', function (event) {
var text = $(this).val();
if (text === '') { // If email is empty
$('#email-conf').prop('disabled', true);
} else {
$('#email-conf').prop('disabled', false);
$('#email-conf').show();
$('#l-email-conf').show();
}
});
JSFiddle

Inline javascript could be an elegant solution if you don't want to write a function.
onkeyup and onkeydown events will do the job and you don't need jQuery
<form>
<p>
<label for="email">Email</label>
<input type="text" name="email" id="email" onkeyup="this.parentNode.nextElementSibling.style.display = 'block';" onkeydown="this.parentNode.nextElementSibling.style.display = 'none';"/>
</p>
<p id="confirm-email">
<label for="confirm">Confirm email</label>
<input type="text" name="confirm" id="confirm"/>
</p>
</form>
CSS:
#confirm-email {
display: none;
}
Example: jsFiddle

Say this is your HTML -
<input type="text" name="username">
<input type="text" name="email" id="email">
<input type="text" name="email_confirm" disabled="disabled" id="email-conf">
<script>
// Use jQuery event handlers
$('#email').on('input', function (event) {
var text = $(this).val();
if (text === '') { // If email is empty
$('#email-conf').prop('disabled', true);
} else {
$('#email-conf').prop('disabled', false);
}
});
</script>
jsFiddle
P.S. - U can toggle hide/show instead of disabling also.

Why is my form validation not working (onsubmit not triggering)?

I am writing a simple registration screen that allows a user to input their email address and password. As standard, I have the user inputting their email address and password twice to confirm. However, the onsubmit attribute on my form does not seem to be executing.
Here is the code:
Fields
<form name="form" id="form" action="" onsubmit="return validateForm()" class="form col-md-12 center-block" method="POST">
<div class="form-group">
<input type="text" class="form-control input-lg" name="name" id="name" placeholder="Full Name">
</div>
<div class="form-group">
<input type="text" class="form-control input-lg" name="email" id="email" placeholder="Email Address">
</div>
<div class="form-group">
<input type="text" class="form-control input-lg" name="cemail" id="cemail" placeholder="Confirm Email Address">
</div>
<div class="form-group">
<input type="password" class="form-control input-lg" name="password" id="password" placeholder="Password">
</div>
<div class="form-group">
<input type="password" class="form-control input-lg" name="cpassword" id="cpassword" placeholder="Confirm Password">
</div>
<div class="form-group">
<button class="btn btn-primary btn-lg btn-block" form="form" type="submit" name="register" id="register">Register</button>
<span class="pull-right">Login</span><br>
</div>
</form>
JavaScript
<script>
function validateForm() {
if (isSame(document.getElementById("email"), document.getElementById("cemail"))
&& isSame(document.getElementById("password"), document.getElementById("cpassword"))) {
return true;
} else {
alert("Confirmation fields do not match, please retype and try again.");
return false;
}
function isSame(elementA, elementB) {
if (elementA.value.trim() == elementB.value.trim()) return true;
else return false;
}
//ignore this
function submitForm() {
document.getElementById("form").submit();
}
</script>
I have tried to debug as much as possible, but it doesn't seem like my submit button is triggering the form's onsubmit. I have viewed the request log, and it is posting the data just fine, however.
Thank you in advance!

The indentation of your code is incorrect: you are missing a } at the end of your validateForm function

There's a syntax error; there's no closing bracket for the first function.
Also, your isSame function doesn't need an if statement.
Hopefully this helps:
JS:
function validateForm() {
if(isSame(document.getElementById("email"), document.getElementById("cemail"))
&& isSame(document.getElementById("password"), document.getElementById("cpassword"))) {
return true;
}else{
alert("Confirmation fields do not match, please retype and try again.");
return false;
}
}
function isSame(elementA, elementB) {
return elementA.value.trim() == elementB.value.trim();
}