We Keep Coding

What makes the front-end validation of form fail?

I am working on submitting a form via jQuery AJAX. The form also has basic validation, that I am doing myself.
The HTML (index.html file):
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<form action="/process" class="modal-dialog" id="order_form">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Pre-order</h5>
<button type="submit" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div id="#validation" class="d-none alert alert-danger">
All fields are mandatory
</div>
<div id="#status" class="d-none alert alert-dismissible">
×
<p class="m-0"></p>
</div>
<div class="form-group">
<label for="first_name">First name:</label>
<input type="first_name" class="form-control" id="first_name" placeholder="First name" name="first_name">
</div>
<div class="form-group">
<label for="last_name">Last name:</label>
<input type="last_name" class="form-control" id="last_name" placeholder="Last name" name="last_name">
</div>
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" placeholder="Enter email" id="email">
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary btn-sm btn-block">Send</button>
</div>
</div>
</form>
</div>
The script:
function isEmail(mail){
return /^(([^<>()\[\]\.,;:\s#\"]+(\.[^<>()\[\]\.,;:\s#\"]+)*)|(\".+\"))#(([^<>()\.,;\s#\"]+\.{0,1})+([^<>()\.,;:\s#\"]{2,}|[\d\.]+))$/.test(mail);
}
function submitOrder(e) {
e.preventDefault();
var form = $(this),
submitUrl = form.attr('action'),
firstName = $('#first_name').val(),
lastName = $('#last_name').val(),
emailAddress = $('#email').val()
// Are there any empty fields?
isEmpty = firstName == ''
|| lastName == ''
|| emailAddress == '';
console.log('Empty filds: ', isEmpty);
console.log('Valid email: ', isEmail(emailAddress));
if (isEmpty) {
$('#validation').removeClass('d-none');
} else {
if (!isEmail(emailAddress)) {
$('#validation').removeClass('d-none').text('Choose a valid email');
} else {
$('#validation').addClass('d-none');
$.ajax({
type: "POST",
url: submitUrl,
data: form.serialize(),
dataType: "json",
success: function(response) {
if (response == 'successful') {
$('#status').addClass('alert-success').find('p').text("Your order was send");
}
else {
$('#status').addClass('alert-danger').find('p').text("We've failed to send your order");
}
$('#status').removeClass('d-none');
}
});
}
}
}
$(document).ready(function(){
// Submit Order Form
$('#order_form').on('submit', submitOrder);
});
The problem:
Evan though the form is not valid, and the console shows Empty filds: true and Valid email: false, the calass 'd-none' is not removed from <div id="#validation" class="d-none alert alert-danger"> and the alert, of course, is not displayed.
What is my mistake?

I've found a mistake in your code but I don't know if it will resolve your problem:
if (isEmpty) {
$(' #validation').removeClass('d-none');
}
should be (space before #validation)
if (isEmpty) {
$('#validation').removeClass('d-none');
}

Here is what worked for me, in case it might help others:
function isEmail(mail){
return /^(([^<>()\[\]\.,;:\s#\"]+(\.[^<>()\[\]\.,;:\s#\"]+)*)|(\".+\"))#(([^<>()\.,;\s#\"]+\.{0,1})+([^<>()\.,;:\s#\"]{2,}|[\d\.]+))$/.test(mail);
}
function submitOrder(e) {
e.preventDefault();
var form = $(this),
submitUrl = form.attr('action'),
firstName = $('#first_name').val(),
lastName = $('#last_name').val(),
emailAddress = $('#email').val()
// Are there any empty fields?
isEmpty = firstName == ''
|| lastName == ''
|| emailAddress == '';
if (isEmpty) {
$('#validation').removeClass('d-none');
} else {
if (!isEmail(emailAddress)) {
$('#validation').removeClass('d-none').text('Choose a valid email');
} else {
$('#validation').addClass('d-none');
var req = $.ajax({
url: form.attr('action'),
type: 'POST',
data: form.serialize()
});
req.done(function(data) {
if (data == 'success') {
$('#status').addClass('alert-success').find('p').text("Your order was send");
}
else {
$('#status').addClass('alert-danger').find('p').text("We've failed to send your order");
}
$('#status').removeClass('d-none');
});
}
}
}
$(document).ready(function(){
// Submit Order Form
$('#order_form').on('submit', submitOrder);
});

How to print the values in jquery into html text?

I wanted to join the HTML text with the values of the item.certificate_name.
I've tried many things but any of it didn't works.
The line I mean is I commented <!-- I WANTED THE CERTIFICATE NAME TO BE HERE-->. I've already inspected, I've already got the name value. The only problem is how to join the text with the value?
<div class="col-xs-12">
<div class="row">
<div class="col-xs-2">
<i class="glyphicon glyphicon-trash center" style="font-size: 50px"></i>
</div>
<div class="col-xs-8">
<div class="clTulisanHapus center" id="idTulisanHapus">
Anda Yakin ingin menghapus Pelatihan?
<!-- I WANTED THE CERTIFICATE NAME TO BE HERE -->
</div>
</div>
</div>
</div>
<div class="col-md-offset-8">
<div class="btn-group">
<input type="hidden" id="idDataId">
<input type="hidden" id="idDataNama">
<button type="button" id="idBtnHapusBatal" class="btn clBtnMdlHapus">Tidak</button>
<button type="button" id="idBtnHapusHapus" data-id="${item.id}" class="btn clBtnMdlHapus">Ya</button>
</div>
</div>
$('#idBtnHapusHapus').click(function() {
var angka = $('#idDataId').val();
var angka = $('#idDataNama').val();
debugger;
$.ajax({
url: './hapussertifikasi/' + angka,
type: 'DELETE',
success: function(model) {
debugger;
window.location = './sertifikasi'
},
error: function(model) {
debugger;
}
});
});

Use Node.textContent to concatenate the text content of the div with item.certificate_name value and CSS white-space: pre; to wrap text on line breaks:
var item = {
certificate_name: 'Certificate Name'
};
var div = document.getElementById('idTulisanHapus');
div.style.whiteSpace = "pre";
div.textContent += ' ' + item.certificate_name
<div class="clTulisanHapus center" id="idTulisanHapus">
Anda Yakin ingin menghapus Pelatihan?
</div>

Add new html element to webpage dynamically in jquery

I have this code:
<div class="container">
<div class="modal fade" id="modalSubscriptionForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header text-center">
<h4 class="modal-title w-100 font-weight-bold">Subscribe</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body mx-3">
<div class="md-form mb-5">
<i class="fas fa-user prefix grey-text"></i>
<input type="text" id="form3" class="form-control validate val1" name="val1">
<label data-error="wrong" data-success="right" for="form3">Title</label>
</div>
<div class="md-form mb-4">
<i class="fas fa-envelope prefix grey-text"></i>
<input type="email" id="form2" class="form-control validate val2" name="val2">
<label data-error="wrong" data-success="right" for="form2">Desc</label>
</div>
<div class="md-form mb-4">
<i class="fas fa-envelope prefix grey-text"></i>
<label data-error="wrong" data-success="right" for="form2">
Coordinates click:
<div class="coorX"></div>
x
<div class="coorY"></div>
</label>
</div>
</div>
<div class="modal-footer d-flex justify-content-center">
<button class="btn btn-indigo saveBtn">Send <i class="fas fa-paper-plane-o ml-1"></i></button>
</div>
</div>
</div>
</div>
<div class="scalize imgpo">
<img src="img/jacket.png" alt="" class="target ">
<div class="item-point" data-top="130" data-left="300" id="point1">
<div></div>
</div>
<div class="item-point" data-top="180" data-left="462" id="point2">
<div></div>
</div>
<div class="item-point" data-top="380" data-left="215" id="point3">
<div></div>
</div>
<div class="item-point" data-left="357" data-top="458" id="point4">
<div></div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('.imgpo').click(function(e) {
var posX = $(this).position().left,posY = $(this).position().top;
$('.coorX').html((e.pageX - posX -10));
$('.coorY').html((e.pageY - posY -10));
$(".tooltip").tooltip("hide");
$('.formAdd').click();
});
$('.saveBtn').click(function(e) {
var val1 = $(".val1").val();
var val2 = $(".val2").val();
var values = {
'val1' : val1,
'val2' : val2
};
alert('Save');
$.ajax({
url: "save.php",
type: "post",
data: values ,
success: function (response) {
alert('Save');
},
error: function(jqXHR, textStatus, errorThrown) {
alert('Error');
}
});
});
$('.removeMe').on('click', function() {
var number = $(this).attr('id');
$('#point' + number).remove();
$('.obiect' + number).remove();
});
$('.scalize').scalize({
styleSelector: 'circle',
animationPopoverIn: 'flipInY',
animationPopoverOut: 'flipOutY',
animationSelector: 'pulse2'
});
/*
$('.tooltips').tooltip({
html: true,
trigger: 'click',
placement: 'top'
})
*/
const $tooltip = $('.tooltips');
$tooltip.tooltip({
html: true,
trigger: 'click',
placement: 'top',
});
$tooltip.on('show.bs.tooltip', () => {
$('.tooltip').not(this).remove();
});
$tooltip.on('click', (ev) => { ev.stopPropagation(); })
});
</script>
<div class="itemsBox">
<form name="saveForm" action="#" method="post">
<div class="obiect1">Obiect 1 <div class="removeMe" id="1">X</div> </div>
<div class="obiect2">Obiect 2 <div class="removeMe" id="2">X</div> </div>
<div class="obiect3">Obiect 3 <div class="removeMe" id="3">X</div> </div>
<div class="obiect4">Obiect 4 <div class="removeMe" id="4">X</div> </div>
</div>
<input type="submit" value="Save" />
</form>
The above code displays the points in the image. Below the picture I have the possibility to delete points from the website and from the picture. After clicking on the image, a tooltip (Bootstrap) is displayed. After clicking on the background image, a form for adding a point in the picture is displayed. The form has the coordinates of the clicked point. It works fine.
How can you write a new point in the picture?
To add a new HTML code to the point in the image:
<div class = "item-point" data-left = "357" data-top = "458" id = "point4">
                <div> </ div>
             </ Div>
<div class = "obiect4"> Obiect 4 <div class = "removeMe" id = "4"> X </ div> </ div>
How to do it?
Prview: http://serwer1356363.home.pl/pub/component/index2.html

This will require some modification on $(".saveBtn").click() event, like this:
$('.saveBtn').click(function(e) {
e.preventDefault();
var val1 = $(".val1").val(); // title
var val2 = $(".val2").val(); // description
var cX = $(".coorX").text();
var cY = $(".coorY").text();
var newPoint = "<div class='item-point' data-top='"+cY+"' data-left='"+cX+"' id='point1'>" +
"<div>" +
"<a href='#' class='toggle tooltips' title='<h1><b>"+val1+"</b><br>"+val2+"</h1>' data-placement='top' data-html='true' rel='tooltip'></a>" +
"</div>" +
"</div>";
var nextObjNumber = $(".itemsBox").children("div").length + 1;
var newObject = "<div class='obiect" + nextObjNumber + "'>Obiect " + nextObjNumber +
"<div class='removeMe' id='"+nextObjNumber+"'>X</div>" +
"</div>";
$(".scalize").append(newPoint); // inserting new point
$(".itemsBox").append(newObject); // inserting new object
$('.scalize').scalize({
styleSelector: 'circle',
animationPopoverIn: 'flipInY',
animationPopoverOut: 'flipOutY',
animationSelector: 'pulse2'
});
const $tooltip = $('.tooltips');
$tooltip.tooltip({
html: true,
trigger: 'click',
placement: 'top',
});
$tooltip.on('show.bs.tooltip', () => {
$('.tooltip').not(this).remove();
});
$tooltip.on('click', (ev) => { ev.stopPropagation(); });
$("#modalSubscriptionForm").modal("hide");
$(".val1").val("");
$(".val2").val("");
alert('Saved!');
// var values = {
// 'val1' : val1,
// 'val2' : val2,
// 'coorY' : cY
// 'coorX' : cX
// };
//
// $.ajax({
// url: "save.php",
// type: "post",
// data: values ,
// success: function (response) {
// alert('Save');
// },
// error: function(jqXHR, textStatus, errorThrown) {
// alert('Error');
// }
//
//
// });
});
To fix the object numbering issue at the bottom, change your form like this:
<form name="saveForm" action="#" method="post" style="margin-left: 15px">
<div class="itemsBox" >
<div class="obiect1">Obiect 1 <div class="removeMe" id="1">X</div> </div>
<div class="obiect2">Obiect 2 <div class="removeMe" id="2">X</div> </div>
<div class="obiect3">Obiect 3 <div class="removeMe" id="3">X</div> </div>
<div class="obiect4">Obiect 4 <div class="removeMe" id="4">X</div> </div>
</div>
<input type="submit" value="Save" />
</form>
You can check out the full source over here: https://www.codepile.net/pile/5Pgzxg4Z

Submit change password form in bootstrap modal through ajax

I Have a change password form which I have tried to code so that it gets submitted through ajax.
I needed to do validation too.
Below is the code that I've written. Is there anyway so that we can use this js ajax function for multiple modal forms?
Or will we need to create a seperate function for submitting each modal form?
Also I wanted to make the parent page reload after user closes the modal so I have added this code:
$('#edit').on('hidden.bs.modal', function() {
location.reload();
});
but it reloads the page when someone clicks cancel button too. Is there any way to prevent reloading when clicking cancel button and only do reloading only by clicking "x".
Here is the code
index.php file where the modal is
<p data-placement="top" data-toggle="tooltip" title="Edit" data-original-title="Edit">
<button class="btn btn-primary btn-xs" data-title="Edit" data-toggle="modal" data-target="#edit" data-backdrop="static" data-keyboard="false">
<span class="glyphicon glyphicon-pencil"> Edit</span>
</button>
</p>
<div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Edit Your Detail</h4>
</div>
<!--/.modal-header-->
<div class="modal-body">
<form method="post" id="updateForm" action="update-info.php">
<input type="hidden" name="userID" value="<?php echo $_SESSION['user']; ?>" />
<div class="form-group">
<label for="customer_name">Customer Name :</label>
<input class="form-control" type="text" name="customer_name" id="customer_name" value="<?php echo $userRow['fullName']; ?>" />
</div>
<h4><u><strong>Change Password</strong></u></h4>
<div class="form-group" id="currentPass-group">
<label for="current_pass">Current Password :</label>
<input class="form-control" type="password" name="current_pass" id="current_pass">
</div>
<div class="form-group">
<label for="new_pass">New Password :</label>
<input class="form-control" type="password" name="new_pass" id="new_pass">
</div>
<div class="form-group">
<label for="confirm_pass">Confirm Password :</label>
<input class="form-control" type="password" name="confirm_pass" id="confirm_pass">
</div>
<div class="modal-footer">
<!-- <input type="submit" name="submit" class="btn btn-block btn-warning" value="Save changes" /> -->
<button type="submit" name="submit" class="btn btn-success" id="submitForm" value="Save changes">Save Changes</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!--/.modal -->
custom.js file:
$('#edit').on('hidden.bs.modal', function() {
location.reload();
});
/* must apply only after HTML has loaded */
$(document).ready(function() {
$("#updateForm").on("submit", function(e) {
$(".error").hide();
var hasError = false;
var currentpass = $("#current_pass").val();
var newpass = $("#new_pass").val();
var cnfpass = $("#confirm_pass").val();
if (currentpass == '') {
$("#current_pass").after('<span class="error text-danger"><em>Please enter your current password.</em></span>');
//$('#currentPass-group').addClass('has-error'); // add the error class to show red input
//$('#current_pass').append('<div class="help-block">Please enter your current password.</div>'); // add the actual error message under our input
hasError = true;
} else if (newpass == '') {
$("#new_pass").after('<span class="error text-danger"><em>Please enter a password.</em></span>');
hasError = true;
} else if (cnfpass == '') {
$("#confirm_pass").after('<span class="error text-danger"><em>Please re-enter your password.</em></span>');
hasError = true;
} else if (newpass != cnfpass) {
$("#confirm_pass").after('<span class="error text-danger"><em>Passwords do not match.</em></span>');
hasError = true;
}
if (hasError == true) {
return false;
}
if (hasError == false) {
var postData = $(this).serializeArray();
var formURL = $(this).attr("action");
$.ajax({
url: formURL,
type: "POST",
data: postData,
success: function(data, textStatus, jqXHR) {
$('#edit .modal-header .modal-title').html("Result");
$('#edit .modal-body').html(data);
$("#submitForm").remove();
//document.location.reload();
},
error: function(jqXHR, status, error) {
console.log(status + ": " + error);
}
});
e.preventDefault();
}
});
$("#submitForm").on('click', function() {
$("#updateForm").submit();
});
});
update-info.php

To use this code for multiple form add ajax code in one function and call that function whenever you want to.
To prevent page from reloading when someone click on cancel
Instead of using
$('#edit').on('hidden.bs.modal', function () {
location.reload();
});
Add one click event on cross and then reload page by location.reload();

You can use e.preventDefault(); and instead of submit use click event
$("#submitForm").on("click", function(e) {
e.preventDefault();

Closing conditionally a bootstrap modal panel if login is successful

I'm building a SPA webapp integrating reactjs with jquery, I have a component to control the authentication. It is rendering a modal panel with username and password.
I would like to close the modal panel conditionally only if the authetication has been succesful.
The problem is that if I set data-dismiss="modal" in the Login button, the modal is closed always unconditionally as the onclick event is fired after.
So basically I would like to know how to have the same behaviour of data-dismiss but once I have received the response from the backend and the authentication has been successful.
Here the code.
var LoginModal = React.createClass({
getInitialState: function () {
return {email: "", password: ""}
},
render: function () {
return (<div className="modal fade" id="loginModal" tabIndex="-1" role="dialog" aria-hidden="true">
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<button type="button" className="close" data-dismiss="modal" aria-hidden="true"><i
className="fa fa-times"></i>
</button>
<h2>Login or Register</h2>
<p className="large">Use social accounts</p>
<div className="social-login">
<a className="facebook" href="#"><i className="fa fa-facebook-square"></i></a>
<a className="google" href="#"><i className="fa fa-google-plus-square"></i></a>
<a className="twitter" href="#"><i className="fa fa-twitter-square"></i></a>
</div>
</div>
<div className="modal-body">
<form className="login-form">
<div className="form-group group">
<label htmlFor="log-email">Email</label>
<input type="email" value={this.state.email} className="form-control" name="log-email"
id="log-email"
placeholder="Enter your email" required onChange={this.handleChangeEmail}/>
<a className="help-link" href="#">Forgot email?</a>
</div>
<div className="form-group group">
<label htmlFor="log-password">Password</label>
<input type="password" value={this.state.password} className="form-control"
name="log-password" id="log-password"
placeholder="Enter your password" required onChange={this.handleChangePassword}/>
<a className="help-link" href="#">Forgot password?</a>
</div>
<div className="checkbox">
<label><input type="checkbox" name="remember"/> Remember me</label>
</div>
<a className="btn btn-success" value="Login" disabled={!this.state.email || !this.state.password} onClick={this.handleClick}>Login</a>
</form>
</div>
</div>
</div>
</div>);
},
handleClick: function () {
$.ajax({
url: "http://localhost:8080/std/rest/oauth/token",
type: "POST",
headers: {
"Authorization": "Basic " + btoa("clientapp" + ":" + "123456"),
"Accept": "application/json",
},
data: {
grant_type: "password",
password: this.state.password,
username: this.state.email,
scope: "read write",
client_secret: "123456",
client_id: "clientapp"
},
dataType: "json",
statusCode: {
200: function(response) {
auth.login(response.access_token, response.expires_in);
},
400: function() {
alert("Bad credentials. Try again.");
}
}
});
},
handleChangeEmail: function (event) {
this.setState({email: event.target.value});
},
handleChangePassword: function (event) {
this.setState({password: event.target.value});
},
isValidForm: function () {
console.log("valid: " + this.state.userData.email && this.state.userData.password);
return (this.state.userData.email && this.state.userData.password);
}
});
ReactDOM.render(
<LoginModal/>,
document.getElementById('login-modal')
);

You're looking for the following jQuery method to close the modal:
$('#loginModal').modal('hide');