Javascript disable submit button unless if all html validations are fufilled - javascript

I have a simple form:
<form role="form" enctype="multipart/form-data">
<div>
<div>
<span>Name</span>
<input type="text" placeholder="Estate name..." id="Editname" required />
</div>
<div>
<span>Address</span>
<input type="text" placeholder="Address..." id="Editaddress" required />
</div>
<div>
<span>Upload</span>
<input type="file" placeholder="Upload File..." id="Editupload" required />
</div>
</div>
<div>
<div>
<span>##</span>
<input type="email" placeholder="Email..." id="Editemail" required />
</div>
<div>
<span>Tel</span>
<input type="tel" pattern="^\d{4}\d{3}\d{4}$" id="Editnumber" required placeholder="Phone no..." />
</div>
<div>
<span>##</span>
<input type="submit" class="form-control btn btn-primary" id="EditfileUpload" required />
</div>
</div>
</form>
Each of these fields has required and some sort of validation.
I want to disable the "Submit" button when the user enters for example the email in the right format, the correct length of the phone number etc.
How can I do this with JavaScript?

JQuery validate would be my first choice. If you don't want a 3rd party library, then override the submit button's action.
document.getElementById('EditfileUpload').addEventListener('click', function(e){
e.preventDefault();
// do your validation checks here.
document.forms['myform'].submit();
});

Related

How i can add onsubmit attribute to <form> in contact form 7 and onclick attribute to the submit button in contact form 7

This is my HTML code:
<form id="form" onsubmit="return false;">
<input type="text" id="userInput" />
<input type="email" id="emailId" />
<input type ="number" id="phoneNumber" />
<input type="submit" onclick="userdetails();" />
</form>
How i can implement this in contact form 7 of my wordpress website. Also i have multiple forms on same page so please help how i can target a specific form with the above mentioned attributes..???
Here is how you can achieve it :
<form id="form1">
<input type="text" id="userInput">
<input type="email" id="emailId" />
<input type ="number" id="phoneNumber" />
<input type="button" onclick="userdetails();" value="Details"/>
</form>
<form id="form2">
<input type="button" onclick="form1.submit()" value="Send" />
</form>
Explanation :
I have replace type="submit" by type=button so that it doesn't submit the form.
If you need to submit a form you can proceed this way onclick="form_id.submit()".

Add current page URL in input in AMP page

I just want to ask that how do I add current URL in an input of form, so I can save it where I want to save.
I have tried simple Javascript, succeed but amp page become invalid.
My code is as follows
<form method="GET" class="p2" action="SUBMIT URL" target="_top">
<input type="hidden" value="" name="redirect" />
<div class="block-width2">
<div class="col-md-6"><p><input name="name" placeholder="Full Name *" type="text" required /></p></div>
<div class="col-md-6">
<p data-aos="fade-left" class="aos-init aos-animate"><input name="Email" placeholder="E-mail ID *" type="email" required /></p>
</div>
</div>
<div class="block-width2">
<div class="col-md-5"><p><input name="Mobile" placeholder="Contact No.*" type="text" required /></p></div>
<div class="col-md-7"><p><input name="city" placeholder="City*" required type="text"></p></div>
</div>
<div class="block-width2">
<div class="col-md-12"><p><input name="comments" placeholder="Comments*" required type="text" /></p></div>
</div>
<input type="hidden" name="vendor" value="VMware" />
<input type="hidden" name="course" value="VMware Training" />
<input type="hidden" name="url" id="url" value="" /> //Here I want page URL.
<div class="block-width2">
<div class="col-md-12"><p><button class="button-set" type="submit">Submit Now </button></p></div>
</div>
</form>
<script>document.getElementById("url").value = location.href;</script> // working with invalid AMP

Validation of nested forms in angularjs

I have a main form and within it I have a second form declared with ng-form directive like this:
<form name="settingsForm">
<label for="firstNameEdit">First name:</label>
<input id="firstNameEdit" type="text" name="firstName" ng-model="person.firstName" required /><br />
<ng-form name="addressForm">
<label for="addressEdit">Address:</label>
<input id="addressEdit" type="text" name="address" ng- model="person.address" /><br />
<label for="zipEdit">ZIP code:</label>
<input id="zipEdit" type="number" name="zip" ng-model="person.zip" required /><br />
<button>Save address</button>
</ng-form>
<button>Save</button>
</form>
When I hit submit button all inputs are validated, I wonder if I can validate only firstName for example and not the ng-form because, I want ng-form to be submitted separated on save address, not on save.
First of all you need to disable the default validation of the form as shown by Zohaib Ijaz. You can utilize the validation variable $invalid provided by AngularJS.
<form name="settingsForm" novalidate>
<div>
<label for="firstNameEdit">First name:</label>
<input id="firstNameEdit" type="text" name="firstName" ng-model="person.firstName" required />
<p ng-show="validateMainForm && settingsForm.firstName.$invalid"
class="help-block">You name is required.</p>
<br />
</div>
<ng-form name="addressForm">
<div>
<label for="addressEdit">Address:</label>
<input id="addressEdit" type="text" name="address" ng- model="person.address" />
</div>
<div>
<label for="zipEdit">ZIP code:</label>
<input id="zipEdit" type="number" name="zip" ng-model="person.zip" required />
<p ng-show="validateAddressForm && addressForm.zip.$invalid"
class="help-block">Zip code is required</p>
</div>
<button type="submit" ng-click="submitAddressForm()">Save address</button>
<br/>
</ng-form>
<button type="submit" ng-click="submitMainForm()">Save</button>
</form>
As you have disabled the default validation, the validation happens on click of submit button for the main form as well as the address form. On submit, a flag is set which shows the error block if the field is invalid. There is a flag validateMainForm for the settingsForm and validateAddressForm for the addressForm. When the flag is true, it shows the p element below each input field if it is invalid.
Here is the plunker that demonstrates this.
For more information, you can refer this blog- Angular Form Validation:
You can do something like this
https://jsbin.com/latepo/edit?html,js,output
<form name="settingsForm" novalidate>
<label for="firstNameEdit">First name:</label>
<input id="firstNameEdit" type="text" name="firstName" ng-model="person.firstName" required /><br />
<ng-form name="addressForm" >
<label for="addressEdit">Address:</label>
<input id="addressEdit" type="text" name="address" ng- model="person.address" /><br />
<label for="zipEdit">ZIP code:</label>
<input id="zipEdit" type="number" name="zip" ng-model="person.zip" required /><br />
<button type="submit" ng-click="submit2()">Save address</button>
</ng-form>
<button type="submit" ng-click="submit1()">Save</button>
</form>
angular.module('myapp', []).controller('MyController', MyController);
function MyController ($scope){
$scope.submit1 = function (){
alert('submit1');
};
$scope.submit2 = function (){
alert('submit2');
};
}

Jquery validate multiple inputs with email

I have a form where i ask the user to input email addresses for an automated email to be sent. I have set both the email inputs to be required and to check for valid email, but it seems to work only for the first one. What am I doing wrong here?
<form class="validate" method="post" id="formLoc">
<div data-role="fieldcontain">
<label for="email-from">from</label>
<input type="text" class="required email" id="email-from" placeholder="from" />
</div>
<div data-role="fieldcontain">
<label for="email-to">to</label>
<input type="text" id="email-to" class="required email" placeholder="to" />
</div>
<div data-role="fieldcontain">
<label for="email-message">message</label>
<textarea id="email-message" cols="100" rows="40"></textarea>
</div>
<div class="email-sent">
<h4></h4>
</div>
<div class="SendEmailButton">
<button type="submit" data-role="button" data-icon="forward" data-inline="true"
data-mini="true" data-theme="c">send</button>
</div>
</form>
Here's a fiddle with the problem : http://jsfiddle.net/bobby5193/8dHg9/544/
Add the name attribute to both input fields.
<input type="text" name="email-from" class="required email" id="email-from" placeholder="from" />
<input type="text" name="email-to" id="email-to" class="required email" placeholder="to" />
<textarea name="email-message" id="email-message" cols="100" rows="40" class="required"></textarea>
Here is a jsFiddle
Update
Here is an updated jsFiddle which has validation on the textarea. I added the name attribute and class="required" to it.
If you want get more than one text box to insert Email like
<ul>
<li>
<input id="emailcheck" type="text" placeholder="Email" name="ToEmails[0]" required />
<input id="emailcheck" type="text" placeholder="Email" name="ToEmails[1]" required />
<input id="emailcheck" type="text" placeholder="Email" name="ToEmails[2]" required />
</li>
</ul>
Now we will get all email address from text box.
var email = $('input[name^=ToEmails]');
console.log(email);

Enter / return button not submitting form in IE

I have the following on a page as well as other forms but this, or any of the others, simply do not submit using the Enter key whereas they do in Firefox - I am at a loss to understand why? I put the hidden submit in there to make it work with firefox.
I am using onclick as the submit button graphic is in a class with background sprite image.
Is there a way to make this happen?
<form action="/userlogin.html" method=post name="LOGform"><h1>Member Sign In</h1>
<fieldset id="inputs">
<div class="form_row">
<div class="form_row_name"><label>Email</label></div>
<div class="form_row_input"><input id="username" type="username" name="username" value="" style="width:60%;" placeholder="Your Email Address"></div>
</div>
<div class="form_row">
<div class="form_row_name"><label>Password</label></div>
<div class="form_row_input"><input id="password" type="password" name="password" value='' style="width:60%;" placeholder="Your Account Password"></div>
</fieldset>
<fieldset id="actions">
<div><div style="float:left; width:35%">
<a onclick="document.forms['LOGform'].submit(); return false;" class="button" href="javascript:;">Sign In</a></div>
<input type="submit" style="display:none"/>
<input type="hidden" name="LOGON" value="logon">
<input type="hidden" name="from" value="">
</fieldset>
</form>
If you want to use an image for your submit button you could just use an image input type instead of a submit button, ie:
<input type="image" src="/mybuttonGraphic.gif" />
This will work on hitting enter across browsers.

Categories