We Keep Coding

Javascript/jquery to validate the form in button click?

Hi i have a class using needs validate in form is there a way for me to validate this on button submit onclick ? or a better way to improve the coding for this ?
Where i can even call the invalid feedback ?
and also when button click it will check the valdiation first before call the database
As this code got some problem later in the end where i couldnt validate anything when button click as it passes to the database immediately without the validation check .
(function validateForm() {
'use strict';
var forms = document.getElementsByClassName('needs-validation');
Array.from(forms)
.forEach(function(form) {
form.addEventListener('submit', function(event) {
if (!form.checkValidity()) {
event.stopPropagation();
event.preventDefault();
}
form.classList.add('was-validated');
}, false)
})
})();
<form id="form" class="needs-validation" onsubmit="return validateForm()">
<!-- <label id="mandatoryField" class="hiddenfield" hidden>* is mandatory</label> -->
<div class="form-group row nameform">
<label for="validationName" class="col-form-label nameadduser">Name:</label>
<div class="col-6">
<input name="validationName" type="text" class="form-control" id="validationName" placeholder="Name" title="Name can be any. e.g. john" required>
<div class="invalid-feedback">
Enter a Name!
</div>
</div>
</div>
<div class="form-group row">
<label for="validationEmail" class="col-form-label emailadduser">Email:</label>
<div class="col-6">
<input name="validationEmail" type="email" class="form-control emails" id="validationEmail" placeholder="example1#gmail.com" pattern="^([a-zA-Z0-9_\-\.]+)#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$"
required>
<div style="margin-left: 3px;" class="invalid-feedback">
Enter a correct Email format!
</div>
</div>
</div>
<div class="form-group row">
<label for="validationUserName" class="col-form-label usernameadduser">Username:</label>
<div class="col-6 ">
<input name="validationUserName" type="text" class="form-control " id="validationUserName" placeholder="Username" pattern="^(?=.{4,}$)(?:[a-zA-Z\d]+(?:[a-zA-Z\d])*)+$" title="Username should be at least 4 letter" required>
<div class="invalid-feedback">
Username must meet the following requirements:
<b>At least four letter</b>
</div>
</div>
</div>
<div class="form-group row">
<label for="validationpassword" class="col-form-label oldpasswordadduser">Old<br>
Password:</label>
<div class="col-6 d-flex">
<input name="validationpassword" type="password" class="form-control pass" id="oldpasswords" placeholder="Password" required>
<i class="bi bi-eye-slash" id="toggleoldPassword"></i>
<!-- <div style="margin-left: 15px;" class="invalid-tooltip password-empty" >
Enter a password!
</div> -->
</div>
</div>
<div class="form-group row">
<label for="validationpassword" class="col-form-label passwordadduser">Password:</label>
<div class="col-6 d-flex">
<input name="validationpassword" onChange="onChange()" type="password" class="form-control pass" id="passwords" placeholder="Password" pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!##$%^&*_=+-]).{7,}$" title="Password should be like this. e.g. A123de!123"
required>
<i class="bi bi-eye-slash" id="togglePassword"></i>
<!-- <div style="margin-left: 15px;" class="invalid-tooltip password-empty" >
Enter a password!
</div> -->
<div id="passwordvalidator" class="invalid-tooltip password-notmeet">
Password must meet the following requirements:
<br><br>
<label class="color-text"> At least one capital letter</label>
<br>
<label class="color-text"> At least one special character</label>
<br>
<label class="color-text"> At least one number</label>
<br>
<label class="color-text"> Be at least 7 letter</label>
</div>
</div>
</div>
<div class="form-group row">
<label for="validationconfirmpassword" class="col-form-label passwordadduser">Re-enter<br>
Password:</label>
<div class="col-6 d-flex">
<input name="validationconfirmpassword" onChange="onChange()" type="password" class="form-control confirmpass" id="confirm_password" placeholder="Confirm Password" required>
<i class="bi bi-eye-slash" id="toggleconfirmPassword"></i>
<div style="margin-left: 20px;" class="invalid-tooltip">
Password do not match or value is null!
</div>
</div>
</div>
<div id="passwordconfirm"></div>
<div class="form-group row">
<label for="validationRole" class="col-form-label role">Role:</label>
<div class="col-3 ">
<select class="select-user-role custom-select-sm col-11" id="select-user-role" required>
<option class="selectrole" selected disabled value="">Select ....</option>
</select>
<div style="margin-left: 10px;" class="invalid-feedback">
Enter a valid user role!
</div>
</div>
</div>
<div class="form-group row placeholderimage">
<img src="" id="output" width="400" height="400" style="border-radius: 50%;" />
<input id="file-upload-input" type="file" accept="image/*" onchange="encodeImageFileAsURL(event);">
</div>
<button id="submitbtn" type="submit" class="btn-primary submitbutton" disabled>Done</button>
</form>
I have a button onclick where i got my database out when click which is this code it is with sweetalert as well not sure do we need to put the prevent button for validation here ?
$('#submitbtn').click(function() {
//get input value field
var name = $('#validationName').val();
var email = $('#validationEmail').val();
var username = $('#validationUserName').val();
var oldpassword = $('#oldpasswords').val();
var password = $('#passwords').val();
var picture = document.getElementById("output").src;
var role = $('#select-user-role').val();
//making ajax call after this retrieve
$.ajax({
url: "https://ecoexchange.dscloud.me:8090/api/postWithRawBody",
method: "POST",
contentType: "text/plain;charset=UTF-8",
headers: {
// Generally used for queries that we're planning to use
query: `UserUpdate(,'${formatParamString(name)}','${formatParamString(username)}','${formatParamString(email)}','','${formatParamString(password)}','','${formatParamString(role)}')`,
// apikey like oXkPNt3p6cuDobzBVjpsPUyawSYDFqFHVWPkijXZZstjVPLLWo
"Content-Type": "text/plain",
apikey: sessionStorage.getItem("apikey")
},
dataType: "text",
// May be quite long
// Usually an array
// Only for specific conditions
data: `UserUpdate(${getQueryInfo()["id"]},'${formatParamString(name)}','${formatParamString(username)}','${formatParamString(email)}','${formatParamString(oldpassword)}','${formatParamString(password)}','${formatParamString(picture)}','${formatParamString(role)}')`,
success: function(data, textStatus, xhr) {
// showing response from API
// showing response box that is added
//console.log(data)
$('#response').html("<div class='alert alert-success'>" + "<b>Success!</b> The information have been updated <b>successfully</b>" + "</div>")
Swal.fire({
icon: 'success',
title: 'Update Successfully!',
html: 'The information have been updated successfully!<br>By pressing <b>okay</b> this page will go to <b>view users</b> page',
showCancelButton: true,
cancelButtonText: "Cancel",
allowOutsideClick: false,
allowEscapeKey: false,
confirmButtonText: 'Okay',
cancelButtonColor: '#9b3be7', // purple
confirmButtonColor: '#79b446', // light green
heightAuto: false,
})
// footer: '<label class="fixissue">How to fix this issue?</label><br>Try to change the username input and press add button again'
.then(function(inputvalue) {
if (inputvalue.isConfirmed) {
window.location.assign('viewUsers.html?id=' + getQueryInfo()['id'])
} else if (inputvalue.isCancel) {
Swal.fire('')
}
})
},
error: function(xhr, textStatus, err) {
if (xhr["status"] == 409) {
$('#response').html("<div class='alert alert-danger'>" + "<b>Error!</b> There is an <b>duplicate</b> on username!" + "</div>")
//then
// setTimeout(function(){ window.location.reload(); },5000); //reload a page after 5 seconds
Swal.fire({
icon: 'error',
title: '<div class="color-text">Update not success!</div>',
html: 'There is an <label class="color-text"><b>duplicate</b></label> on username!<br><label class="fixissue">Solution ✔</label><br>Try to change the <b>username</b> and press <b>add</b> again',
heightAuto: false,
allowOutsideClick: false,
allowEscapeKey: false
// footer: '<label class="fixissue">How to fix this issue?</label><br>Try to change the username input and press add button again'
})
}
if (xhr["status"] == 400) {
$('#response').html("<div class='alert alert-danger'>" + "<b>Error!</b> The <b>old password </b> is incorrect!" + "</div>")
Swal.fire({
icon: 'error',
title: '<div class="color-text">Update not success!</div>',
html: 'The <label class="color-text"><b>old password</b></label> is incorrect!<br><label class="fixissue">Solution ✔</label><br>Try to change the <b>old password</b> and press <b>add</b> again',
heightAuto: false,
allowOutsideClick: false,
allowEscapeKey: false
// footer: '<label class="fixissue">How to fix this issue?</label><br>Try to change the username input and press add button again'
})
}
// if (xhr["status"] == "(failed)") {
// $('#response').html("<div class='alert alert-danger'>"+"<b>Error!</b> There is an <b>duplicate</b> on username! where you cant add in image"+"</div>")
// }
}
});
})

Form submit with ajax passing form to php without page refresh

can somebody please tell me why this code is not working I want to sent form data to PHP by post method but my PHP is not receiving any request
here is my signup form
signupmodal.php
<form action="<?php htmlentities($_SERVER['PHP_SELF']) ?>" method="post" id="signupForm">
<div class="form-group">
<label for="forUserName">User Name:</label>
<input type="text" name="username" id="username" class="form-control" placeholder="Enter User Name" aria-describedby="helpId">
</div>
<div class="form-group">
<label for="forEmail">Email:</label>
<input type="email" name="email" id="email" class="form-control" placeholder="Enter Your Email" aria-describedby="helpId">
</div>
<div class="form-group">
<label for="">password:</label>
<input type="password" name="password" id="password" class="form-control" placeholder="Enter Password" aria-describedby="helpId">
</div>
<div class="form-group">
<label for="forConfirmPassword">Confirm Password</label>
<input type="password" name="cpassword" id="cpassword" class="form-control" placeholder="Enter Confirm Password" aria-describedby="helpId">
</div>
<input type="submit" class="btn btn-primary" value="SignUp" id="subbtn" onclick="myFunction()">
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
<?php echo json_encode($_POST);
// echo $_POST['email'];
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
$username = $_POST['username'];
$email = $_POST['email'];
$password = $_POST['password'];
$cpassword = $_POST['cpassword'];
echo $username;
if ($password == $cpassword) {
//code
} else
echo '<div class="alert alert-danger" role="alert">
<strong>danger</strong>
</div>';
} ?>
</div>
script.js
function myFunction() {
console.log(window.location.href);
$('form').on('submit', function (event) {
$.ajax({
type: 'POST',
url: 'includes/signupmodal.php',
data: $('form#signupForm').serialize(),
success: function () {
data = $('form#signupForm').serialize();
console.log(data);
},
});
event.preventDefault();
});
}
I want to submit my data using ajax without loading the page so, please tell me where I am wrong

You are only running myFunction() when you click the submit button and by then it's too late to add a submit event listener.
I suggest you add your listener when the document is ready.
Remove the onclick="myFunction()" from your submit button and add this to your script
jQuery(function() {
myFunction() // executes when the document has completely loaded
})
// or even just
// jQuery(myFunction)
See https://api.jquery.com/jquery/#jQuery3

My Formspree contact form isn't sending out the email information

I have been using formspree on one of my sites. Everything was working fine at first then the form messages weren't sending out emails. I see the name and the message when the form is sent out, but the email just isn't registering. I looked at the shortcode and don't see anything on my end. Does anyone see the issue here?
I also have my "I'm Looking for a quote" wording overlapping my check box in most browsers. I put a p in and took it out, but I think that might be messing with the code. Anything thoughts on this as well?
Here's the HTML:
<form role="form" id="formspree" method="post">
<div class="form-group">
<label class="sr-only" for="contact-name">Your Name</label>
<input type="text" name="name" placeholder="Your Name" class="contact-email form-control" id="contact-email">
</div>
<input type="text" name="_gotcha" style="display:none">
<div class="form-group">
<label class="sr-only" for="contact-email">Email</label>
<input type="text" name="email" placeholder="Email" class="contact-email form-control" id="contact-email">
</div>
<div class="form-group">
<label class="sr-only" for="contact-message">Message</label>
<textarea name="message" placeholder="Message" class="contact-message form-control" id="contact-message" style="height: 168px;width:100%;"></textarea>
</div>
<div class="row">
<div class="col-sm-6" style="
text-align: right;
padding-right: 15px;
<div class="form-group"><label class="checkbox-inline"><input id="looking_for_quote" type="checkbox" value="quote">I'm Looking For A Quote</label>
</div>
</div>
<div class="col-sm-6">
<button type="submit" class="btn btn-lg"> Send Message</button>
</div>
</div>
</form>
and here is the script:
$(document).ready(function() {
// process the form
$('form[method=post]').submit(function(event) {
var email = "mat.mcsales#verizon.net";
if ($('#looking_for_quote').is(':checked')) {
email = "orders.mcsales#gmail.com";
}
$.ajax({
url: "https://formspree.io/" + email,
method: "POST",
data: {
message: $('textarea').val(),
from: $('input[name=name]').val(),
_reply: $('input[type=email]').val()
},
dataType: "json",
success: function() {
alert("Thanks! We'll get back to you soon.");
}
});
// stop the form from submitting the normal way and refreshing the page
event.preventDefault();
});
});

I figured it out I think.. I changed _reply: $('input[type=email]').val() to email: $('input[name=email]').val()

How to display the values passing using ajax in another php file?

I have written a code to pass values from a form using ajax but the values passed to another php page is not getting displayed there. I want to display the values passed in email.php file and send it as a mail to a email-id.
My script :
$(function() {
$('#send_message').on('click', function(e) {
var name = $('#exampleInputName1').val();
var email = $('#exampleInputEmail1').val();
var tel = $('#exampleInputTelephone1').val();
var cn = $('#exampleInputCountry1').val();
var message = $('#exampleInputMessage1').val();
e.preventDefault();
$.ajax({
type: 'post',
url: 'php/email.php',
data: {
name: name,
email: email,
tel: tel,
cn: cn,
message: message
},
success: function(data) {
alert(message);
}
});
});
});
html page:
<form name="contactForm1" id='contact_form1' method="post" action='php/email.php'>
<div class="form-inline">
<div class="form-group col-sm-12 padd">
<input type="text" class="form-control" name="name" id="exampleInputName1" placeholder="name">
</div>
<div class="form-group col-sm-12 padd">
<input type="email" class="form-control" name="email" id="exampleInputEmail1" placeholder="email address">
</div>
<div class="form-group col-sm-12 padd">
<input type="text" class="form-control" name="telephone" id="exampleInputTelephone1" placeholder="phone">
</div>
<div class="form-group col-sm-12 padd">
<input type="text" class="form-control" name="Country" id="exampleInputCountry1" placeholder="Country">
</div>
<div class="form-group col-sm-12 padd">
<textarea class="form-control" name="message" rows="3" id="exampleInputMessage1" placeholder="message"></textarea>
</div>
</div>
<div class="form-group col-xs-12 padd">
<div id='mail_success' class='success' style="display:none;">Your message has been sent successfully.
</div>
<!-- success message -->
<div id='mail_fail' class='error' style="display:none;">Sorry, error occured this time sending your message.
</div>
<!-- error message -->
</div>
<div class="form-group col-xs-8 padd" id="recaptcha2"></div>
<div class="form-group col-sm-4 padd" id='submit'>
<input type="submit" id='send_message' name="sendus" class="btn btn-lg costom-btn" value="send">
</div>
</form>
email.php
<?php
$temp = $_POST['name'];
echo $temp;
?>
Can anyone suggest how to do this ?

How to submit form if validate using jquery?

I am validating form with jquery. So when form submit i am using event.preventDefault(); after validate form , form will be submit to respective action page.But in my case it doesn't work.
Code what i did-
$('form[name=contact_form]').submit(function(event) {
event.preventDefault();
var formData = $('form[name=contact_form]').serialize();
var phone = $.trim($('form[name=contact_form]').find('input[name=PHONE]').val()).length;
var intRegex = /[0-9 -()+]+$/;
var alert = $('#contact_alert');
var success = $('#contact_success');
if(phone==0){
phone.focus();
alert.html("<p class='alert alert-danger' style='text-align:left;'>Phone number is required</p>");
}
else if((phone < 10)){
phone.focus();
alert.html("<p class='alert alert-danger' style='text-align:left;'>Please enter a valid phone number</p>");
return false;
}else{
return true;
}
});
Html Page :
<?php
echo form_open_multipart('home/inquiry', array('name' => 'contact_form'));
?>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input type="hidden" name="form_type" value="C">
<input type="text" name="NAME" id="user-name" class="form-control" placeholder="Full Name"/>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="text" name="PHONE" id="user-phone" class="form-control" placeholder="Phone"/>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="text" name="EMAIL" id="user-email" class="form-control" placeholder="Email"/>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="text" name="SUBJECT" id="user-subject" class="form-control" placeholder="Reason for inquiry"/>
</div>
</div>
<div class="col-md-12">
<textarea class="form-control" name="MESSAGE" id="user-message" placeholder="Message"></textarea>
</div>
<div class="col-md-12 text-left">
<div class="form-group">
<input type="submit" name="submit" class="btn btn-warning">
</div>
</div>
</div>
<?php echo form_close(); ?>

Do not call event.preventDefault(); if you want the form to be submitted after it validates ok.
Returning false after failed validation is enough.

$(this).submit();
When it's valid.

Try to replace the return true; for $(this).submit();

I usually do something like
$("#submit").submit(function(e){
if(validateFields() == true){ //If all fields are valid
$("#submit").submit();
}
else{
e.preventDefault(e);
}
});