I am trying to validate the form using jquery but it's not working.
I am trying to show a red line on-field if it's empty on button click.
Below is the HTML code.
<div id="myModal" class="modal">
<div class="modal-content">
<div id="custom-form">
<div class="col-md-8">
<form name="addData" method="post" id="addData" class="form"
action="#"
data-hasrequired="<?= $block->escapeHtmlAttr(__('* Required Fields')) ?>"
data-mage-init='{"validation":{}}'>
<fieldset class="fieldset">
<legend class="legend"><span><?= $block->escapeHtmlAttr(__('Fill in the fields to place your order.')) ?></span></legend>
<fieldset class="fieldset row">
<div class="fields col-md-6">
<div class="field name required">
<label class="label" for="title"><span><?= $block->
escapeHtmlAttr(__('Full Name')) ?></span></label>
<div class="control">
<input id="bnname" title="Name" value="" class="input-text" type="text" required="true" minlength="15">
</div>
</div>
<div class="field address required">
<label class="label" for="title"><span><?= $block->
escapeHtmlAttr(__('Address')) ?></span></label>
<div class="control">
<input id="bnaddress" title="Address" value="" class="input-text" type="text" data-validate="{'validate-street':true}"
>
</div>
</div>
<div class="field city required">
<label class="label" for="title"><span><?= $block->
escapeHtmlAttr(__('City')) ?></span></label>
<div class="control">
<input id="bntext" title="City" value="" class="input-text" type="text" data-validate="{'validate-street':true}"
>
</div>
</div>
<div class="field telephone required">
<label class="label" for="title"><span><?= $block->escapeHtmlAttr(__('Telephone')) ?></span></label>
<div class="control">
<input id="bntelephone" title="Telephone" value="" class="input-text" data-validate="{'required-number':true}"
type="text" >
</div>
</div>
<div class="field postalcode required">
<label class="label" for="title"><span><?= $block->escapeHtmlAttr(__('Postal code')) ?></span></label>
<div class="control">
<input id="bnpostalcode" title="Postal code" value="" class="input-text" data-validate="{'required-number':true}"
type="text" >
</div>
</div>
</div>
</fieldset>
</fieldset>
<div class="actions-toolbar">
<div class="primary">
<div class="action submit primary buy" title="Order Now"><span><?= $block->
escapeHtmlAttr(__('Order Now')) ?></span></div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
I am not sure how to simply validate these fields using jquery.
Here is the jquery code
var isValid;
$("input").each(function() {
var element = $(this);
if (element.val() == "") {
isValid = false;
}
});
is there any way we can add validation to it ?
Related
In this code, what happens when I change checkbox value (i.e. If I click on credit card checkbox) then <div class="creditcard"> shows, and if I click on paypal then <div class="paypal"> shows.
Now, when I choose credit card and then click on submit button, then form does not submit. And if I check paypal checkbox and click submit button then nothing happen again. I don't understand why.
How can I submit form whether I choose credit card checkbox or paypal?
$(document).ready(function() {
$('input.payment').on('change', function() {
$('input.payment').not(this).prop('checked', false);
});
$("#credit").click(function() {
if ($(this).is(":checked")) {
$(".creditcard").show();
$(".paypal").hide();
} else {
$(".creditcard").hide();
$(".paypal").show();
}
});
$("#paypal").click(function() {
if ($(this).is(":checked")) {
$(".paypal").show();
$(".creditcard").hide();
} else {
$(".paypal").hide();
$(".creditcard").show();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" action="checkout.php" autocomplete="off">
<div class="col-lg-7 mb--20 float-left">
<div class="form-group">
<label for="fname">Full Name</label>
<input type="text" class="form-control" id="fname" placeholder="Enter Your Name" name="fname" required="">
</div>
</div>
<div class="col-lg-5 float-right">
<div class="row">
<div class="col-12">
<div class="checkout-cart-total">
<div class="col-md-6">
<input type="checkbox" id="credit" class="payment" name="mode" value="credit card">
<label for="credit">Credit Card</label>
</div>
<div class="col-md-6">
<input type="checkbox" id="paypal" class="payment" name="mode" value="PayPal">
<label for="paypal">Paypal</label>
</div>
<div class="creditcard" style="display:block;">
<div class="form-group">
<label for="cardNumber">CARD NUMBER</label>
<input type="tel" class="form-control" name="cardNumber" placeholder="Valid Card Number" required value="" />
</div>
</div>
<div class="paypal" style="display:none;">
<div class="form-group">
<label for="paypal_email">Email ID</label>
<input type="email" class="form-control" name="paypal_email" placeholder="Please enter paypal email" required/>
</div>
</div>
<button type="submit" name="submit" id="submit" class="place-order w-100">Place order</button>
</div>
</div>
</div>
</div>
</form>
You should be using radio buttons instead of checkboxes. I cleaned up your code also to use one event handler.
I also updated so the appropriate fields are dynamically set as required.
$(document).ready(function() {
$('input.payment').on('change', function() {
$("input[name='cardNumber']").prop("required",false);
$("input[name='paypal_email']").prop("required",false);
$(".creditcard").hide();
$(".paypal").hide();
if($(this).val() == "PayPal"){
$(".paypal").show();
$("input[name='paypal_email']").prop("required",true);
}
else{
$("input[name='cardNumber']").prop("required",true);
$(".creditcard").show();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" action="checkout.php" autocomplete="off">
<div class="col-lg-7 mb--20 float-left">
<div class="form-group">
<label for="fname">Full Name</label>
<input type="text" class="form-control" id="fname" placeholder="Enter Your Name" name="fname" required="">
</div>
</div>
<div class="col-lg-5 float-right">
<div class="row">
<div class="col-12">
<div class="checkout-cart-total">
<div class="col-md-6">
<input checked type="radio" id="credit" class="payment" name="mode" value="credit card">
<label for="credit">Credit Card</label>
</div>
<div class="col-md-6">
<input type="radio" id="paypal" class="payment" name="mode" value="PayPal">
<label for="paypal">Paypal</label>
</div>
<div class="creditcard" style="display:block;">
<div class="form-group">
<label for="cardNumber">CARD NUMBER</label>
<input type="tel" class="form-control" name="cardNumber" placeholder="Valid Card Number" value="" />
</div>
</div>
<div class="paypal" style="display:none;">
<div class="form-group">
<label for="paypal_email">Email ID</label>
<input type="email" class="form-control" name="paypal_email" placeholder="Please enter paypal email" />
</div>
</div>
<button type="submit" name="submit" id="submit" class="place-order w-100">Place order</button>
</div>
</div>
</div>
</div>
</form>
I have a form of a prescription. I want to print out that prescription form while submit and also want a proper format in that printout page.
form html
<form role="form" class="registration-form" id="registration_form_id">
<fieldset>
<div class="form-top">
<div class="form-top-left">
<h3>Patient Information</h3>
</div>
<div class="form-top-right">
<i class="fa fa-user"></i>
</div>
</div>
<div class="form-bottom">
<div class="form-group">
<label for="form-first-name">Name</label>
<input type="text" name="form-first-name" placeholder="name" class="form-first-name form-control require" id="name">
</div>
<div class="form-group">
<label for="form-last-name">Age</label>
<input type="number" name="form-last-name" placeholder="Age" class="form-last-name form-control require" id="age" >
</div>
<div class="form-group">
<label for="form-last-name">Mobile Number</label>
<input type="number" name="form-last-name" placeholder="Mobile Number" class="form-last-name form-control require" id="mobile_number" >
</div>
<div class="form-group">
<label for="form-last-name">Religion</label>
<input type="text" name="form-last-name" placeholder="Religion" class="form-last-name form-control require" id="religion" >
</div>
<div class="form-group">
<label for="form-last-name">Occupation</label>
<input type="text" name="form-last-name" placeholder="Occupation" class="form-last-name form-control require" id="occupation" required>
</div>
<div class="form-group">
<h4>Gender</h4>
<div class="row">
<div class="col-md-4">
Male<input class="col-md-4" type="radio" name="gender" value="1">
</div>
<div class="col-md-4">
Female<input class="col-md-4" type="radio" name="gender" value="2">
</div>
<div class="col-md-4">
Other<input class="col-md-4" type="radio" name="gender" value="3">
</div>
</div>
</div>
<div class="form-group">
<h4>Marital status</h4>
<div class="row">
<div class="col-md-4">
Married<input type="radio" class="col-md-4" name="marital_status" value="1">
</div>
<div class="col-md-4">
Single<input type="radio" name="marital_status" class="col-md-4" value="1">
</div>
</div>
</div>
<button type="button" class="btn btn-next">Next</button>
</div>
</fieldset>
<fieldset>
<div class="form-group">
<label for="form-about-yourself">Allergic history</label>
<textarea name="allergic_history" placeholder="Allergic history" class="form-about-yourself form-control " id="allergic_history" ></textarea>
</div>
<div class="form-group">
<label for="form-about-yourself">Personal history</label>
<textarea name="personal_history" placeholder="Personal history" class="form-about-yourself form-control " id="personal_history" ></textarea>
</div>
<button type="button" class="btn btn-previous">Previous</button>
<button type="button" class="btn" id="prescription_form_submition">Submit!</button>
</fieldset>
printout code in js
var divToPrint = document.getElementById('registration_form_id');
newWin= window.open("");
newWin.document.write('<html><style>#media print{body {font-size:16px;} #patient_doctor_info{border-bottom:1px solid #ccc;overflow:hidden;padding:20px 0 10px 0;} #patient_doctor_info span{font-size:18px;} #patient_info{float:left;} #doctor_info{float:right;} #patient_prescription_info{padding:20px 0;overflow:hidden;} #patient_old_prescription{padding-right:5%;border-bottom:1px solid #000;} #patient_new_prescription{overflow:hidden;padding:0 20px;} .new_prescription{font-size : 20px}}</style><body onload="window.print()"><div id="patient_doctor_info"><div id="patient_info"><p><lable>Name :</lable><span><b>'+name+'</b></span></p><p><lable>Mobile Number :</lable><span><b>'+mobile_no+'</b></span></p><p><lable>Age :</lable><span><b>'+age+'</b></span></p><p><lable>Gender :</lable><span><b>'+sex+'</b></span></p></div><div id="patient_prescription_info"><div id="patient_old_prescription"><p><lable>Allergy :</lable><span><b>'+allergic_history+'</b></span></p><p><lable>Social History :</lable><span><b>'+personal_history+'</b></span></p></div></div></body></html>');
newWin.print();
newWin.close();
the print pagelooks like the below image
But I want like below image
So my main questions are.....
how to printout specific div or form value of a webpage using javascript.
How to apply css in that print page?
I have googling this issue several times but still not getting proper solution.
Anybody help please ?
I had a html form with set of input fields for each of which I am giving required="true" for validation. But when I click on submit after entering the mandatory fields it is give an error:
An invalid form control with name='' is not focusable
I know if we use novalidate to the form I wont get that error, but my validation wont work. How can I make my validation work without error?
<form name="customerForm" class="form-horizontal" id="custForm">
<fieldset>
<div class="form-group">
<label for="customerName" class="col-lg-4 col-lg-offset-1 control-label">Name</label>
<div class="col-lg-4">
<input class="form-control" ng-model="$root.customerDetails.customerName" placeholder="Enter customer name" type="text" required="true" value = "{{customerName}}">
</div>
</div>
<div class="form-group">
<label for="postCode" class="col-lg-4 col-lg-offset-1 control-label">Post code</label>
<div class="col-lg-4">
<input class="form-control" ng-model="$root.customerDetails.address.postcode" placeholder="Enter post code" type="text" value = "{{postCode}}">
</div>
<div class="col-lg-2">
<button type="next" class="btn btn-primary" ng-click="$ctrl.findAddress()">Find address</button>
</div>
</div>
<div class="form-group">
<label for="selectAddress" class="col-lg-4 col-lg-offset-1 control-label">Select address</label>
<div class="col-lg-4">
<select class="form-control" id="selectAddress" ng-model="$ctrl.quote.newClient.customerAddress" ng-change="$ctrl.populateAddressFields()">
<option ng-repeat="address in addresses"
value="{{address}}" >{{address}}</option>
</select>
</div>
</div>
<div class="form-group ng-hide">
<label for="textArea" class="col-lg-4 col-lg-offset-1 control-label">Address</label>
<div class="col-lg-4">
<textarea ng-model="$ctrl.quote.newClient.customerAddress" class="form-control" rows="3" required="true"></textarea>
</div>
</div>
<div class="form-group">
<label for="address1" class="col-lg-4 col-lg-offset-1 control-label">Address 1</label>
<div class="col-lg-4">
<input class="form-control" ng-model="$root.customerDetails.address.addressLine1" placeholder="Enter Address 1" type="text" required="true" value = "{{addressLine1}}">
</div>
</div>
<div class="form-group">
<label for="address2" class="col-lg-4 col-lg-offset-1 control-label">Address 2</label>
<div class="col-lg-4">
<input class="form-control" ng-model="$root.customerDetails.address.addressLine2" placeholder="Enter Address 2" type="text" required="true" value = "{{addressLine2}}">
</div>
</div>
</div>
<div class="form-group">
<label for="inputEmail" class="col-lg-4 col-lg-offset-1 control-label">Email address</label>
<div class="col-lg-4">
<input class="form-control" ng-model="$root.customerDetails.eMail" placeholder="Enter customer email" type="email" required="true" value = "{{emailId}}">
</div>
</div>
<div class="form-group">
<label for="customerMobile" class="col-lg-4 col-lg-offset-1 control-label">Mobile number</label>
<div class="col-lg-4">
<input class="form-control" ng-model="$root.customerDetails.customerMobile" placeholder="Enter customer mobile number" type="text" required="true">
</div>
</div>
<div class="form-group" ng-show="$root.customerDetails.tradeType.description == 'Limited Company'">
<label for="inputCompanyRegistrationNumber" class="col-lg-4 col-lg-offset-1 control-label">Company registration number</label>
<div class="col-lg-4">
<input class="form-control" ng-model="$root.customerDetails.companyRegNo" placeholder="Enter company registration number" type="text" required="true">
</div>
</div>
</fieldset>
</form>
And Iam using $valid to validate the form
<div class="col-lg-1">
<button form="custForm" type="submit" class="btn btn-primary right-button" ng-click="customerForm.$valid && $ctrl.proceedToPaymentDetails()">Next</button>
</div>
So I have the following fields, basically to create an account. This is just for a prototype. I was wondering how to disable the continue button and only enable the button once all fields have been completed. I have seen this can be done using jQuery and forms, but as this isn't really a form it doesn't work correctly. I understand it may be easier using but I have to use all of the fields there as they are shown. So basically is there a way for it work with only using what I already have?
<div id="form1">
<div class="row form-row form-bg">
<div class="container">
<div class="col-md-12 form-wrapper">
<form role="form">
<div class="form-content">
<legend class="hd-default">Account information</legend>
<div class="row">
<div class="form-group col-md-4 col-sm-6">
<label for="first-name">Username*: </label>
<input type="text" id="username" class="form-control" placeholder="Username" required="">
</div>
</div>
<div class="row">
<div class="form-group col-md-4 col-sm-6">
<label for="password">Password*:</label><img src="help_icon.gif" title="Password must be between 8 and 15 characters, contain at least one number and one alphabetic character, and must not contain special characters." alt="Password must be between 8 and 15 characters, contain at least one number and one alphabetic character, and must not contain special characters.">
<input type="text" id="password" class="form-control" placeholder="Password" required="">
</div>
</div>
<div class="row">
<div class="form-group col-md-4 col-sm-6">
<label for="password">Re-enter Password*:</label>
<input type="text" id="password1" class="form-control" placeholder="Password" required="">
</div>
</div>
</div>
<div id="form2">
<div class="row form-row form-bg">
<div class="container">
<div class="col-md-12 form-wrapper">
<form role="form">
<div class="form-content">
<legend class="hd-default">Contact information</legend>
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="form-group col-md-3 col-sm-3">
<label>Title</label>
<select name="title" class="form-control">
<option value="1">Mr</option>
<option value="2">Mrs</option>
<option value="3">Miss</option>
<option value="4">Dr</option>
<option value="5">Ms</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="form-group col-md-4 col-sm-6">
<label for="first-name">First Names(s)*:</label>
<input type="text" id="firstname" class="form-control" placeholder="First Name(s)" required="">
</div>
</div>
<div class="row">
<div class="form-group col-md-4 col-sm-6">
<label for="password">Surname*:</label>
<input type="text" id="surname" class="form-control" placeholder="Surname" required="">
</div>
</div>
<div class="row">
<div class="form-group col-md-4 col-sm-6">
<label for="password">Email*:</label>
<input type="text" id="email" class="form-control" placeholder="Email" required="">
</div>
</div>
<div class="row">
<div class="form-group col-md-4 col-sm-6">
<label for="password">Re-enter Email*:</label>
<input type="text" id="email1" class="form-control" placeholder="Email" required="">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="form3"
<form action="?" method="POST">
<div class="g-recaptcha" data-sitekey="your_site_key"></div>
<br/>
</form>
</div>
<input type="submit" id="continue" value="Continue" disabled="disabled" a href="address.html"/>
</div>
</div>
</fieldset>
</div>
</form>
</div>
You may not have nested forms.
Once fixed, you can just check if the fields are empty or not after an input changes.
$('#continue').click(function(e){
e.preventDefault();
if(checkFields())
$('#form1').find('form').submit();
return false;
});
function checkFields() {
$('#form1 input').each(function(){
if($(this).val() == '')
return false;
else
return true;
});
}
I have a copy function set up on my checkout page. The sole purpose of it is to copy the text that was entered for the customers shipping information that they entered and display it further down the page in a confirmation section.
It is working great for the customers name and address1 line. The address2, city, state, and zipcode line will not show up though. I have no idea why. I am doing the exact same thing as I am doing for the address1 and name. I have tried changing data-copy names, but nothing is working.
This is where the customer would enter their shipping info at.
<div class="shippinginfocontainer">
<span class="summarytitle"><p>Enter Shipping Information</p>
</span><br>
<div class="center">
<div class="field">
<label class="paddingleft" for="fullname">Full Name</label>
<div class="center"><input type="text" class="biginputbarinline preview" id="ShipToFullname" data-copy="#name" name="ShipToFullname" required></div>
</div>
<div class="field">
<label class="paddingleft" for="streetline1">Street Line 1</label>
<div class="center"><input type="text" class="biginputbarinline preview" id="ShipTostreetline1" data-copy="#address1" name="ShipTostreetline1" required></div>
</div>
<div class="field">
<label class="paddingleft" for="streetline2">Street Line 2</label>
<div class="center"><input type="text" class="biginputbarinline" id="ShipTostreetline2" data-copy="#address2" name="ShipTostreetline2" value="<?php echo escape($user->data()->streetline2); ?>"></div>
</div>
<div class="field">
<label class="paddingleft" for="city">City</label>
<div class="center"><input type="text" class="biginputbarinline" id="ShipTocity" data-copy="#confirmcity" name="ShipTocity" value="<?php echo escape($user->data()->city); ?>" required></div>
</div>
</div>
<div class="formleftcenter">
<div class="field">
<label for="state">State</label>
<input type="text" class="mediuminputbar" id="ShipTostate" data-copy="#confirmstate" name="ShipTostate" value="<?php echo escape($user->data()->state); ?>" required>
</div>
<div class="formrightcenter">
<div class="field">
<label for="zipcode">Zip Code</label>
<input type="text" class="mediuminputbar" id="ShipTozipcode" name="ShipTozipcode" value="<?php echo escape($user->data()->zipcode); ?>" required>
</div>
I then am copying the text to here(I left the state one out):
<p>Shipping to:</p>
<p><div id="name"></div></p>
<p><div id="address1"></div></p>
<p><div id="address2"></div></p>
<p><div id="confirmcity"></div></p>
<p><div id="confirmzip"></div></p>
The Jquery
$(document).ready(function() {
$(".preview").on('input', function() {
$($(this).data('copy')).html($(this).val());
});
});
Any idea why it is not working on those inputs?
You only have the 'preview' class on your full name and address1 lines.
Your jquery selector is selecting all elements on the page with the class 'preview', so the logic inside will only apply to HTML elements with the class 'preview'.
You'll want to change the rest of your inputs to also include the 'preview' class.
You have preview class in name & address 1 input field
<input type="text" class="biginputbarinline preview" id="ShipToFullname" data-copy="#name" name="ShipToFullname" required>
but you dont have preview class in other input fields
<input type="text" class="biginputbarinline" id="ShipTostreetline2" data-copy="#address2" name="ShipTostreetline2">
add preview in other input field classes
I can't speak to the php part, but the HTML and jquery should look something like this:
window.addAddress = function() {
var inputs = $('input').map(function () {
return $(this).val();
});
var i = 0;
$.each($('.data'), function(){
$(this).html(inputs[i]);
i++;
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="shippinginfocontainer"> <span class="summarytitle"><p>Enter Shipping Information</p>
</span>
<br>
<div class="center">
<div class="field">
<label class="paddingleft" for="fullname">Full Name</label>
<div class="center">
<input type="text" class="biginputbarinline preview" id="ShipToFullname" data-copy="#name" name="ShipToFullname" value="Mickey Gordon" required>
</div>
</div>
<div class="field">
<label class="paddingleft" for="streetline1">Street Line 1</label>
<div class="center">
<input type="text" class="biginputbarinline preview" id="ShipTostreetline1" data-copy="#address1" name="ShipTostreetline1" value="Suite 105" required>
</div>
</div>
<div class="field">
<label class="paddingleft" for="streetline2">Street Line 2</label>
<div class="center">
<input type="text" class="biginputbarinline" id="ShipTostreetline2" data-copy="#address2" name="ShipTostreetline2" value="701 Rackamac Ln">
</div>
</div>
<div class="field">
<label class="paddingleft" for="city">City</label>
<div class="center">
<input type="text" class="biginputbarinline" id="ShipTocity" data-copy="#confirmcity" name="ShipTocity" value="Oxnard" required>
</div>
</div>
</div>
<div class="formleftcenter">
<div class="field">
<label for="state">State</label>
<input type="text" class="mediuminputbar" id="ShipTostate" data-copy="#confirmstate" name="ShipTostate" value="California" required>
</div>
<div class="formrightcenter">
<div class="field">
<label for="zipcode">Zip Code</label>
<input type="text" class="mediuminputbar" id="ShipTozipcode" name="ShipTozipcode" value="93031" required>
</div>
<p>Shipping to:</p>
<p>
<div id="name" class="data"></div>
</p>
<p>
<div id="address1" class="data"></div>
</p>
<p>
<div id="address2" class="data"></div>
</p>
<p>
<div id="confirmcity" class="data"></div>
</p>
<p>
<div id="confirmzip" class="data"></div>
</p>
<input type="button" value="Add" onclick="addAddress()" />