Add more/remove functionality is throwing out of validation - javascript

I am trying to submit a form in that I have Addmore functionality in it.
Example: I have entered name and then I have used addmore button so now remove appeared in second tr.
When I click the remove that tr is removed now, but when click the form submit button it is skipping the phone number validation,
so to remove the functionality is throwing out validation.
My html somewhat looks like this:
<form>
Name<input type="text" name="name" id="name" placeholder="Name Your Name "/>
<table class="skillsTable" id="jobSkills">
<tbody>
<tr class="gdskilltr">
<td><button type="button" class="addSkills"> Add Skill</button></td>
<td><button type="button" class="removeSkill"> Remove Skill</button></td>
</tr>
</tbody>
</table>
phone<input type="text" name="phone" id="phone" placeholder="enter Your phone "/>
<button type="submit" id="JobSubmit">Submit</button>
</form>
And here my Javascript validation starts:
var skillcount = 1;
$(".addSkills").click(function () {
$('#jobSkills tr:last').after('<tr class="gdskilltr "><td></td></tr>');
skillcount++;
});
$("#jobSkills").on('click', '.removeSkill', function () {
$(this).parent().parent().remove();
});
$("#JobSubmit").click(function () {
if ($("#name").val() == '') {
$("#warning_message").html('Please Enter name');
$("#name").focus();
return false;
}
if ($("#phone").val() == '') {
$("#warning_message").html('Please Enter name');
$("#phone").focus();
return false;
}
}

Related

How can I show button only if the user can input email to input field?

I have a user profile update form and a delete account button. I want to show the delete account button only if the user can input their email.
$(document).ready(function() {
var user_email = $('input[name="emp_email"]').attr('placeholder');
$(".email-pass-delete").on("input", function() {
var current_email = $('.email-pass-delete').val();
if (user_email == current_email) {
$(".del_acount").removeClass("hide_del_button");
}
});
});
.hide_del_button {
display: none;
}
<input type="text" disabled="" placeholder="testemail#gmail.com" name="emp_email" class="form-control">
<input type="text" placeholder="If you want to delete your account please enter your Email" value="" name="email_pass" class="form-control email-pass-delete">
<input type="button" value="Delete account?" class="btn btn-custom del_acount hide_del_button">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Your code is working, but you forgot the else statement.
If the user made it correct once, then changes it, it will keep showing too.
$(document).ready(function() {
var user_email = $('input[name="emp_email"]').attr('placeholder');
$(".email-pass-delete").on("input", function() {
var current_email = $('.email-pass-delete').val();
if (user_email == current_email) {
$(".del_acount").removeClass("hide_del_button");
} else {
$(".del_acount").addClass("hide_del_button");
}
});
});
.hide_del_button {
display: none;
}
<input type="text" disabled="" placeholder="testemail#gmail.com" name="emp_email" class="form-control">
<input type="text" placeholder="If you want to delete your account please enter your Email" value="" name="email_pass" class="form-control email-pass-delete">
<input type="button" value="Delete account?" class="btn btn-custom del_acount hide_del_button">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
In your actual code you only unhide the button when the email is correct, you have to add an else statement to hide the button again. But there is a more intresting approach which is to use the toggleClass function.
For more info about the toggleClass function, check https://api.jquery.com/toggleclass/
So your js code should look like this:
$(document).ready(function() {
var user_email = $('input[name="emp_email"]').attr('placeholder');
$(".email-pass-delete").on("input", function() {
var current_email = $('.email-pass-delete').val();
$(".del_acount").toggleClass(
"hide_del_button",
!(user_email == current_email))
});
});

Disable input in table row if one of input filled

I have javascript code to disable other inputs if one is filled .
I need it in table that comes out of database.
The sad thing is that it only works with first table row and disable all inputs in table (but if input filled is not first nothing happens)
Javascript:
$(function(){
$("input").on("keyup", function(){
if($(this).hasClass("inputA") && $(".inputA").val()){
$("input.inputB").prop("disabled", true);
$("input.inputA").prop("disabled", false);
$("input.inputC").prop("disabled", true);
} else if($(this).hasClass("inputB") && $(".inputB").val()){
$("input.inputA").prop("disabled", true);
$("input.inputB").prop("disabled", false);
$("input.inputC").prop("disabled", true);
} else if($(this).hasClass("inputC") && $(".inputC").val()){
$("input.inputA").prop("disabled", true);
$("input.inputB").prop("disabled", true);
$("input.inputC").prop("disabled", false);
} else {
$(".inputA, .inputB").prop("disabled", false);
}
});
});
My td from html table:
<td><input type="text" class="inputA" value=""></td>
<td><input type="text" class="inputB" value=""></td>
<td><input type="text" class="inputC" value=""></td>
How to make it work for each line separated?
Use the same class on each input, create event on those input after that check the value of the input if she's not empty disable all of others input for this works in a line just select all input of the parent.
Try to avoid multiple test as you did. Not lisible and maintainable.
Example
$(".input").on("keypress change keyup",function(){
if($(this).val() != "")
{
$(this).parent().parent().find(".input").not($(this)).prop("disabled",true);
}
else
{
$(this).parent().parent().find(".input").prop("disabled",false);
}
});
.input:disabled{
background-color:LightBlue;
border:solid 1px blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<input type="text" class="input" value="">
</td>
<td>
<input type="text" class="input" value="">
</td>
<td>
<input type="text" class="input" value="">
</td>
</tr>
<tr>
<td>
<input type="text" class="input" value="">
</td>
<td>
<input type="text" class="input" value="">
</td>
<td>
<input type="text" class="input" value="">
</td>
</tr>
</table>
This solves your issue! Disable all input fields that doesn't have same class as the one being currently edited.
Demo: https://jsfiddle.net/3tf8ou3y/1/
jQuery(document).ready(function($) {
$("tr").on("keyup", "input", function(event) {
// get the current row
var $row = $(event.delegateTarget);
// get the class of the input field being edited
var this_class = $(this).attr('class');
if ($(this).val().length > 0) {
// if the input field has a value, disable all
// other input fields in the sam row
$('input:not(.'+this_class+')', $row).prop('disabled', true);
} else {
// else enable all input fields
$('input', $row).prop('disabled', false);
}
});
});
You can use 'jQuery(this).val()' instead of 'jQuery(".inputA").val()' or 'jQuery(".inputB").val()' or jQuery(".inputC").val()

Textbox values are cleared after function ends (Issue): JQuery

I have below code to set fullName value, logic works but after it sets the value all the textbox values are cleared. I need overcome this issue.
<script>
$(document).ready(function() {
$('#check').click(function() {
if ( $('#city').val() == '' )
{
alert('Empty!!!');
}
else
{
$('#fullName').val("hi");
}
});
});
</script>
<form name="form1" method="post" action="">
City: <input type="text" name="city" id="city"><br>
Last name: <input type="text" name="LastName" value="Mouse"><br>
Full name: <input type="text" name="fullName" id="fullName"><br>
Phone number: <input type="text" name="Last" value="Mouse"><br>
<button id="check">Check</button>
</form>
By default a button within a form but with no type is a submit button. My guess is you are actually submitting the form when you click the button, and the inputs are 'cleared' because a new page is loading.
Try adding type="button" to your button.
<button id="check" type="button">Check</button>
Use PreventDefault() to cancel postback, becouse your button does not have type so HTML put the default behavior like submit, try:
$('#check').click(function(e) {
e.preventDefault();
if ( $('#city').val() == '' )
{
alert('Empty!!!');
}
else
{
$('#fullName').val("hi");
}
});
LIVE DEMO

How do I enable cancel button with form validation?

I'm using the frmvalidator javascript found here for my code.
I had to create a custom validation because I'm validating two input fields with the same id (I'm using an array). The validation is working, the problem now though is when I click the cancel button, the validation still takes effect meaning I can't close the dialog box unless I fill in all fields.
Here's my code:
<form name="UpdateIndustry" action="addIndustry.jsp" method="get">
<table align="center">
<c:forEach var="row" items="${paramValues.industries}">
<jsp:setProperty property="tableId" name="bean" value="${row}"/>
<c:set var="ctr" value="${ctr + 1}"/>
<input type="hidden" name="hello" value="${row}"/>
<tr><th>INDUSTRY NAME</th>
<td><div id='UpdateIndustry_industryName_errorloc' style="color:red;"></div>
<input type="text" name="industryName" size=40 value="${bean.thisIndustry.INDUSTRYNAME}"/></td></tr>
</c:forEach>
<input type="hidden" name="finalCount" value="${ctr}"/>
<tr><td style="text-align:center" colspan="3">
<input type=submit name="submit" value="Update Industry" onclick="btnUpdate_click()"/>
<input type=submit name="submit" value="Cancel" onclick="btnCancel_click()"/></td></tr>
</table>
</form>
and the script:
<script language="JavaScript">
var frmvalidator = new Validator("UpdateIndustry");
frmvalidator.EnableOnPageErrorDisplay();
frmvalidator.EnableMsgsTogether();
function btnUpdate_click(){
frmvalidator.setAddnlValidationFunction(FinalValidator); }
function btnCancel_click(){
frmvalidator.clearAllValidations();
window.close(); }
</script>
and here's the FinalValidator function, where the validation happens.
function FinalValidator()
{
var myForm = document.forms["UpdateIndustry"];
if (myForm.industryName.length > 0) {
for(var i=0; i <= myForm.industryName.length; i++)
{
if(myForm.industryName[i].value.length == 0)
{
sfm_show_error_msg('Please enter industry name.', myForm.industryName[i]);
return false;
}
}
}
return true;
}
How can I get the cancel button to work? Thanks in advance for the help! :)
$(document).ready(function () {
$("#YourButtonID").click(function () {
error = false;
$(".span1").remove();
if ($("#YourTextBoxID").val() == "") {
$("#YourTextBoxID").after("<span class='span1'>Write Your Error</span>");
error = true;
}
});
});
Try this.

Enter key hook with html form

I implemented form in HTML:
<form id="loginForm" action="/?do=login" method="post" >
<table width="50%" border="0">
<tr>
<td colspan="2">
<span id="LoginErr"></span>
<div>Login:</div>
<input id="Login" type="text" maxlength="32" name="Login" value="{VAR %LOGIN}"/>
</td>
</tr>
<tr>
<td valign="bottom">
<span id="PasswordErr"></span>
<div>Passoword:</small></div>
<input id="Password" type="password" maxlength="128" name="Password" value=""/>
</td>
</tr>
<tr>
<td>
Enter
</td>
</tr>
</table>
</form>
This is the check and post function (using jQuery):
function checkLogin()
{
var focused = false;
function report_error(field, err)
{
$('#' + field + 'Err').html(err);
if (!focused)
{
$('#' + field).focus();
focused = true;
}
}
$('#LoginErr').html('');
$('#PasswordErr').html('');
$login = jQuery.trim($('#Login').val());
$password = jQuery.trim($('#Password').val());
if ($login.length == 0)
report_error('Login', 'The login field is empty!');
if ($password.length == 0)
report_error('Password', 'The password field is empty!');
if (!focused)
$('#loginForm').submit();
}
But I have trouble with enter key. When i press this key form is posted without my javascript check.
I need call my function when enter key is pressed and no more action.
Thanx!
Update:
Correct code is:
in form tag need add: onSubmit="return checkLogin()
in javascript if (!focused) $('#loginForm').submit(); need change on return !focused;
Thanks to rdamborsky.
use onSubmit form event:
$(function() {
$('#loginForm').onSubmit = checkLogin;
});
It will be called just before your form's data are actually sent whatever triggers the submit event (click on button, pressing enter within one of fields...)

Categories