Develop Reference

How to display a text when button click when all the * input are not fill and when fill the * go hide?

I would like some help where there a text where i would like to display if the button is press and this text appear * is mandatory if the input field are not fill up with those there are * how can i do this ?
This is my snippet where i have all the form created now i would want that this * is mandatory when the add button is press when the input is not fill up how can i do that ?
$('#submitbutton').click(function() {
var passwordInput = $('#passwords')
//Empty password validation
if (passwordInput.val() == '') {
$('.password-notmeet').show();
$('#mandatoryField').show();
// $('.password-empty').show();
return;
} else {
$('#mandatoryField').hide();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="needs-validation" novalidate>
<label id="mandatoryField" class="hiddenfield">* 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" 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])*)+$" 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 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,}$" 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>
<button type="submit" class="btn-primary submitbutton">Add</button>

With some modifications to the HTML to try to make it valid - is this what you were trying to do more or less?
When the Add button is clicked the form is initially prevented from the default submit behaviour so that ALL input elements might be checked to see if the value is empty. If it is empty a clone of the template contents is made ( with the * is mandatory text ) and appended to the parent node. As I am unfamiliar with jQuery the following is all done with vanilla Javascript but no doubt there are some slick jQuery methods that could be used to replace portions of this?!
document.querySelector('button[type="submit"]').addEventListener('click',function(e){
e.preventDefault();
let errors=[];
let col=document.querySelectorAll('input,textarea');
col.forEach(n=>{
// remove any existing error(mandatory) messages
let span=n.parentNode.querySelector('span.mandatory');
if( span!==null ){
n.parentNode.removeChild(span)
}
// if the value is empty, add the error (mandatory) message
if( n.value=='' ){
let tmpl=document.querySelector('template').content.cloneNode(true);
tmpl.querySelector('i').textContent=n.name;
n.parentNode.appendChild( tmpl );
errors.push(n.name);
}
});
if( errors.length==0 ){
alert('OK - submit the form');
}
});
const onChange=(e)=>{
let css={
err:'invalid',
ok:'valid'
};
let col=document.querySelectorAll('.pwdcheck');
col.forEach(n=>{
n.classList.remove(css.err,css.ok);
if( col[0].value!=col[1].value )n.classList.add(css.err);
else n.classList.add(css.ok);
});
};
span.mandatory{
color:red;
display:inline-block;
padding:0.25rem;
margin:0,5rem 0;
border:1px solid red;
background:pink
}
span.mandatory > i{
color:white;
}
.invalid-feedback{
opacity:0;
}
.visible{
opacity:1;
}
label.col-form-label:before{
content:'*';
color:red;
}
.invalid{
background:pink;
color:white;
}
.valid{
background:rgba(0,255,0,0.5);
}
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<form class='needs-validation' novalidate>
<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'
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])*)+$'
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='passwords' class='col-form-label passwordadduser'>Password:</label>
<div class='col-6 d-flex'>
<input
name='validationpassword'
onChange='onChange(event)'
type='password'
class='form-control pass pwdcheck'
id='passwords'
placeholder='Password'
pattern='^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!##$%^&*_=+-]).{7,}$'
required />
<i class='bi bi-eye-slash' id='togglePassword'></i>
<div id='passwordvalidator' class='invalid-tooltip password-notmeet'>
Password must meet the following requirements:
<div class='color-text'> At least one capital letter</div>
<div class='color-text'> At least one special character</div>
<div class='color-text'> At least one number</div>
<div class='color-text'> Be at least 7 letter</div>
</div>
</div>
</div>
<div class='form-group row'>
<label for='confirm_password' class='col-form-label passwordadduser'>Re-enter<br>
Password:</label>
<div class='col-6 d-flex'>
<input
name='validationconfirmpassword'
onChange='onChange(event)'
type='password'
class='form-control confirmpass pwdcheck'
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='select-user-role' 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 value='' class='selectrole' selected disabled hidden>Select ....
</select>
<div style='margin-left: 10px;' class='invalid-feedback'>
Enter a valid user role!
</div>
</div>
</div>
<button type='submit' class='btn-primary submitbutton'>Add</button>
</form>
<template>
<span class='mandatory'>* <i></i> is mandatory</span>
</template>

checkValidity() not showing any html5 error notifications when fields are empty and posting with Ajax

I have a form that posts using Ajax, I also want to set an HTML5 required attribute on some input fields, but this stops working as expected with Ajax.
So I did the following:
$("body").on("click",".register-button",function(e){
e.preventDefault();
if($('#registerform')[0].checkValidity()){
registerform = $(".register-form").serialize();
$.ajax({
type:'post',
url:"includes/registreren.php",
data:({registerform: registerform}),
success:function(data){
var content = $( $.parseHTML(data) );
$( "#registerresult" ).empty().append( content );
}
});
}else{
}
});
This way the form is not posted when empty, but I also don't get any notifications that fields are empty like I would get when only using HTML to post.
I also tried logging the validity like so:
$("body").on("click",".register-button",function(e){
e.preventDefault();
$check = $('#registerform')[0].checkValidity();
console.log($check);
registerform = $(".register-form").serialize();
$.ajax({
type:'post',
url:"includes/registreren.php",
data:({registerform: registerform}),
success:function(data){
var content = $( $.parseHTML(data) );
$( "#registerresult" ).empty().append( content );
}
});
});
Which shows false in my console when empty. So the code works, why are the HTML5 notifications not shown? I remember doing something similar in the past and I didn't have to add any custom error messages then, it just worked.
This is my HTML markup:
<form id="registerform" class="register-form" method="post">
<div class="row">
<div class="col-md-6">
<input type="text" name="voornaam" placeholder="Voornaam" required>
</div>
<div class="col-md-6">
<input type="text" name="achternaam" placeholder="Achternaam" required>
</div>
<div class="col-md-12">
<input type="text" name="bedrijf" placeholder="Bedrijfsnaam (optioneel)">
</div>
<div class="col-md-6">
<input type="text" name="telefoon" placeholder="Telefoonnummer" required>
</div>
<div class="col-md-6">
<input type="text" name="email" placeholder="E-mail" required>
</div>
<div class="col-md-3">
<input type="text" name="huisnummer" id="billing_streetnumber" placeholder="Huisnummer" required>
</div>
<div class="col-md-3">
<input type="text" name="tussenvoegsel" placeholder="Tussenvoegsel" required>
</div>
<div class="col-md-6">
<input type="text" name="postcode" id="billing_postcode" placeholder="Postcode" required>
</div>
<div id="postcoderesult" class="col-lg-12">
<div class="row">
<div class="col-md-6">
<input type="text" name="straat" placeholder="Straatnaam" readonly required>
</div>
<div class="col-md-6">
<input type="text" name="woonplaats" placeholder="Woonplaats" readonly required>
</div>
</div>
</div>
<div class="col-md-6">
<input type="password" name="password" placeholder="Wachtwoord (minimaal 6 tekens)" required>
</div>
<div class="col-md-6">
<input type="password" name="confirmpassword"placeholder="Herhaal wachtwoord" required>
</div>
<div id="registerresult">
</div>
</div>
<button type="button" name="submit" class="register-button">Account aanmaken</button>
</form>
What am I missing?

Having Trouble Making Google recaptcha reequired in HTML form

It seems that this script is working and stopping the submit button from working until after the captcha v2 has been verified.
I tried following some guides from previous questions but nothing seems to work for me.
Could someone shed some light on me? Thanks.
<form id="myForm" class="contact-form" action="php/send-email.php" method="post" novalidate>
<div class="row">
<div class="column width-6">
<input type="text" name="fname" class="form-fname form-element large" placeholder="First Name*" tabindex="1" required>
</div>
<div class="column width-6">
<input type="text" name="lname" class="form-lname form-element large" placeholder="Last Name" tabindex="2">
</div>
<div class="column width-6">
<input type="email" name="email" class="form-email form-element large" placeholder="Email address*" tabindex="3" required>
</div>
<div class="column width-6">
<div class="field-wrapper">
<div class="form-select form-element">
<select name="budget" tabindex="4" class="form-aux" data-label="Project Type">
<option selected="selected" value="">Project Type</option>
<option value="">Website Project</option>
<option value="">Marketing</option>
<option value="">Branding</option>
<option value="">Other</option>
</select>
</div>
</div>
</div>
<div class="column width-6">
<input type="text" name="honeypot" class="form-honeypot form-element large">
</div>
</div>
<div class="row">
<div class="column width-12">
<div class="field-wrapper">
<textarea name="message" class="form-message form-element large" placeholder="Message(Include phone number if needed)*" tabindex="7" required></textarea>
</div>
</div>
<div class="column width-12">
<div class="g-recaptcha"
data-callback="onCompleted"
data-sitekey="6Legq1IUAAAAANF4DoxqEkVyS3jY0N4UQKDUPuBa">
</div>
<input type="submit" value="Send Email" class="form-submit button medium bkg-theme bkg-hover-theme color-white color-hover-white" onsubmit="check_if_capcha_is_filled">
</div>
</div>
</form>
<script>
$('#myForm').submit(function(event) {
console.log('form submitted.');
if (!grecaptcha.getResponse()) {
console.log('captcha not yet completed.');
event.preventDefault(); //prevent form submit
grecaptcha.execute();
} else {
console.log('form really submitted.');
}
});
onCompleted = function() {
console.log('captcha completed.');
$('#myForm').submit();
alert('wait to check for "captcha completed" in the console.');
}
Yes the stript is closed I don't know why the end tag isn't showing.

Multiple forms not working in a J2EE web application

I have designed a web page which contains multiple forms and each form is provided with its unique submit button and are directed to different servlets on submission.
But at a time only one is getting submitted successfully to the database and another form is not even getting directed to its servlets.
How to do it?
<!-- UPDATE DONOR CARD-->
<div class="col-xl-4 " style="opacity:0.9;">
<div class="card bg-info text-center card-form mb-4">
<div class="card-body">
<h3 class="align-center">Update Donors Detail</h3>
<p>Please fill out this form to update </p>
<form action="UpdateHospitalController" method="post" name="update">
<div class="form-group">
<input type="text" class="form-control form-control-lg" placeholder="Mobile no." id="mobNo" name="mobNo">
</div>
<div class="form-group">
<input type="text" class="form-control form-control-lg" placeholder="Date" id="datepickers" name="date">
</div>
<input type="submit" class="btn btn-dark btn-block" name="updateSubmit">
</form>
</div>
</div>
</div>
<!-- ADD DONOR CARD-->
<div class="col-xl-4 " style="opacity:0.9;">
<div class="card bg-info text-center card-form mb-4">
<div class="card-body">
<h3 class="align-center">Add Donors</h3>
<p>Please fill out this form to add </p>
<form action="HospitalController" method="post" onclick="return(validate())" name="addForm">
<div class="form-group">
<input type="text" class="form-control form-control-lg" placeholder="Mobile no." maxlength="10" id="mobNo" name="mobNos">
<span id="sp1"></span>
</div>
<div class="form-group" >
<input type="text" class="form-control form-control-lg " placeholder="Name" id="name" name="userName">
<span id="sp2"></span>
</div>
<div class="form-group">
<select class="form-control form-control-lg" placeholder="Blood Group" name="bglist" id="list">
<option value="Opos">O+</option>
<option value="Oneg">O-</option>
<option value="Apos">A+</option>
<option value="Aneg">A-</option>
<option value="Bpos">B+</option>
<option value="Bneg">B-</option>
<option value="ABpos">AB+</option>
<option value="neg">AB-</option>
</select>
<span id="sp3"></span>
</div>
<div class="form-group" >
<input type="text" class="form-control form-control-lg " placeholder="Date" id="datepicker" id="date" name="dates">
<span id="sp4"></span>
</div>
<div class="form-group">
<input type="text" class="form-control form-control-lg" placeholder="City" id="city" name="city">
<span id="sp5"></span>
</div>
<input type="submit" class="btn btn-dark btn-block" name="addDonor">
</form>
</div>
</div>
</div>

You can only perform one query in database at a time. You need to direct the servlet to this page again using response.sendRedirect("filename") and then try with other form. Hope it helps.If not lemme know.

Close icon on ajax registeration form closing the form, but not clearing all data fields

I tried to create a close icon on right top of form. It closes the form, but when I reopen page without reload, all data fields come up with data.
How can I clear all fields automatically when I close the form?
Html code (with JavaScript inline, at the bottom):
<ul class="nav navbar-nav navbar-right">
<li id="myBtn">Register With Us</li>
<div id="myModal" class="modal">
<form>
<!-- Modal content -->
<div class="modal-content">
<div class="modal-body" style="background-color: #fff;">
<span class="close"><img src="images/index/close.png" width="40px;" height="40px;" ></span>
<h1 style="padding-top: 0px;"> WELCOME TO LOGIN PAGE</h1>
<div class="controls">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="form_name">First Name *</label>
<input id="form_name" autocomplete="off" type="text" name="name" class="form-control" placeholder="Please enter your first name *" required="required" data-error="Firstname is required.">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="form_lastname">Last Name *</label>
<input id="form_lastname" type="text" name="surname" autocomplete="off" class="form-control" placeholder="Please enter your last name *" required="required" data-error="Lastname is required.">
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="form_dob">Date of Birth *</label><br>
<input id="form_dob" type="date" name="dob" autocomplete="off" class="form-control" placeholder="Please enter your Date of Birth *" required="required" data-error="Date of Birth is required.">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="form_gender" style="padding-right: 15px;">Gender *</label>
<label class="gender"><input type="radio" required autocomplete="off" name='gender' value='Male'><img src="images/index/male.png" width="40px" height="35px" > Male</label><label class="gender"><input type="radio" autocomplete="off" required name='gender' value='Female'><img src="images/index/female.png" width="40px" height="35px">Female</label>
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="form_nationality"> Nationality *</label><br>
<select required name="Nationalty" class="form-control" style=" text-align: center;" autocomplete="off">
<option value='' ><strong >Select Your Nationality</strong></option>
<option value="BGD">Bangladesh</option>
<option value="IND">India</option>
<option value="NEP">Nepal</option>
<option value="PAK">Pakistan</option>
<option value="SL">Sri Lanka</option>
</select>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="form_photo" style="padding-right: 20px;">Photo *</label>
<input type="file" class=" myButton " autocomplete="off" />
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="form_email">Email *</label>
<input id="form_email" type="email" name="email" class="form-control" placeholder="Please enter your email *" required="required" data-error="Valid email is required." autocomplete="off">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="form_phone">Phone No *</label>
<input id="form_phone" type="tel" name="phone" class="form-control" placeholder="Please enter your phone *" autocomplete="off">
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="form_passport_no">Passport No *</label>
<input id="form_passport_no" type="email" name="email" class="form-control" placeholder="Please enter your Passport Number *" required="required" data-error="Valid Passport is required." autocomplete="off">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="form_passport_expiry">Passport Expiry Date*</label>
<input id="form_passport_expiry" type="date" name="phone" class="form-control" placeholder="Please enter your Passport Expiry Date" autocomplete="off">
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="form_visa_issue">Visa Issue Date *</label>
<input id="form_visa_issue" type="date" name="email" class="form-control" placeholder="Please enter your Visa Issue Date *" required="required" data-error="Valid email is required." autocomplete="off">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="form_visa_expiry">Visa Expiry Date *</label>
<input id="form_visa_expiry" type="date" name="phone" class="form-control" placeholder="Please enter your Visa Expiry Date" autocomplete="off">
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="form_message">Company Details *</label>
<textarea id="form_message" name="message" class="form-control" placeholder="Please provide company Details *" rows="4" required data-error="Please,leave us a message." autocomplete="off"></textarea>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-12">
<input id="reset" type="reset" class="btn btn-ghost " value="Reset" style="font-size: 20px; margin-left: 35%;">
<input type="submit" class="btn btn-ghost " value="Register" style="font-size: 20px; margin-left: 50px;">
</div>
</div>
<div class="row">
<div class="col-md-12">
<p class="text-muted"><strong>*</strong> </p>
</div>
</div>
</div>
</form>
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
};
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</div>
</div>
</div>

Reset your form..on closing window and clicking close button.
Like this...
document.getElementById("myForm").reset();//myForm is your form id
OR using jquery reset your form. $("#myForm")[0].reset();
<script type="text/javascript">
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
document.getElementById("myForm").reset();
};
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
document.getElementById("myForm").reset();
}
}

call jquery trigger function to reset button when you close the form and when open the form it will reset your form and all fields will be blank.

Your code is not using bootstrap functions.
To close modal, you didn't need new javascript! Bootstrap.js do it itself. Add data-dismiss="modal" to your button. Have a look on this example
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
With bootstrap, you can overload the hidden event by a function.
/**
* When moddal is closing...
*/
$('myModal').on('hidden.bs.modal', function () {
// Reset form !
$("#myForm")[0].reset();
});

As you do not have any id with the form and assuming you only have one form on the page following code should work. Add a statement right before you show the form.
modal.style.display = "block";
document.forms[0].reset()