I have one input field in which user can enter email as well as 10 digit phone number if any of this condition is fulfill i want to enable continue button . I am able to enable button when user type email but I fail to enable the button when user type 10 digit mobile number
here is my code
https://stackblitz.com/edit/angular-p5knn6?file=src%2Fapp%2Flogin-component%2Flogin-component.component.html
<div class="login_div">
<form #loginForm="ngForm">
<input type="text" name="email"
autocomplete="off"
placeholder="Enter the Email or Number"
[(ngModel)]="userenterValue"
required
pattern="^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+$">
<input type="submit" value="Continue"
class="btn"
[class.disbled]="!loginForm.valid"
[disabled]="!loginForm.valid">
</form>
</div>
Just use the pattern like this:
pattern="^(\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+)$|^(\d{10})$"
Related
Image of form:
Hi, I have created a chrome extension that injects jquery actions in a form which has 2 input boxes and a login button. Hence after entering the text in input box of form enter key is a must or user should manually enter the text.
I have tried injecting the text value into input boxes followed by the login click but it didnt work as react listeners in the form are not triggered.
UI Input boxes
1. email input box
<input type="email" name="email" class="auth0-lock-input" placeholder="yours#example.com" autocomplete="off" autocapitalize="off" aria-label="Email" aria-invalid="false" value="" >
2. password input box
<input type="password" name="password" class="auth0-lock-input" autocomplete="off" autocapitalize="off" value="" aria-label="Password" aria-invalid="false" placeholder="your password" >
3. Login button
<button class="auth0-lock-submit" name="submit" type="submit" aria-label="Log In" style="background-color: rgb(51, 107, 155); display: block;">
I would like to create a zipcode validator for a delivery service website.
(Almost like a promo code field where only the correct code will work.)
It is an HTML form on the client-side where the user can type in their zipcode and check if delivery is available in their area.
There will be 5 chosen zipcodes where delivery is available.
This is what I've tried so far with one zipcode but it hasn't been showing any error messages.
<form>
<div class="form-group">
<input class="form-control" required
data-msg="Sorry we do not deliver to you yet."
data-label="Zipcode"
type="number" name="zipcode"
placeholder="Enter your zipcode or address"
pattern="11111" required
/>
</input>
</div>
<div class="btn-wrapper mt-6">
<input type="submit" value="Submit">
</div>
</form>
-If the user enters and submits the correct zip code it should take them to the ordering page.
-If the zip code is not one of the chosen zipcodes, an error message should appear below the form "Sorry we do not deliver to you. Subscribe here to be notified when delivery will be available to you." (This error message would require javascript)
-Chosen zipcodes (any number will work for now). ex: 11111, 22222, 33333, 44444, 55555
currently input pattern not supported for number type but it available for text, search, url, tel, email, and password
<p>validate any 5 digit</p>
<form>
<input pattern="[0-9]{5}" required />
<input type="submit" value="Submit">
</form>
<p>validate only 11111, 22222, 33333, 44444, 55555</p>
<form>
<!-- or: 1{5}|2{5}|3{5}|4{5}|5{5} -->
<input pattern="11111|22222|33333|44444|55555" required />
<input type="submit" value="Submit">
</form>
hello guys i need to automatic trigger the enter button after the user switch to another html input type='text'. i need to do this so that i can validate the form.
here is my code:
<input type="text" class="form-control input-sm" name="student_lastname" placeholder="Last Name" pattern="[A-Za-z].{1,}" title="Only Letters are accepted and more than 1 letter" required>
i need the error title="Only Letters are accepted and more than 1 letter" to pop up when the user is finished typing to the box
right now this is what my code looks like
onblur is the perfect solution, and was made specifically for when the user leaves an input field. Just do something like this:
For HTML:
<input type="text" onblur="validate()" />
And for JS:
function validate() {
// This is how you automatically make them click the Enter button:
enterButton.click();
}
This question already has an answer here:
How to change the textbox value from checkbox
(1 answer)
Closed 6 years ago.
I have built an order form in which the user would enter in a company name, last name, email and an address and an optional checkbox for shipping priced at $19.99. I downloaded the paypal payment form module for my dreamweaver cs5 program which converts the form into a paypal form.
The nice thing about this program is that it automatically creates a mysql database with all the input fields when a person clicks the "pay now" button It also generates the files automatically in a folder called "PPPaymentForm" which i then upload in the root of my site and gives me a backend as well so i can monitor all the payment transactions.
So back to my original issue, i need some way so that if a person decides to click the checkbox which is set at $19.99, that it will automatically add to the price which is set in an hidden input named "hdwppamount" where the value is set to $175.00. So therefor if the shipping option is clicked, the person would click the "Pay Now" button and would be redirected to the paypal payment page, with the new calculated price at $194.99.
I am not proficient with javascript or php, and tried many functions myself but nothing worked. Could someone help me with this please?
Thank You
<form action="PPPaymentForm/PPPaymentForm.php" method="post" name="topchoiceform" id="topchoiceform">
<input placeholder="Company Name" type="text" name="companyname" required>
<input placeholder="First Name" type="text" name="firstname" required>
<input placeholder="Last Name" type="text" name="lastname" required>
<input placeholder="Email" type="email" name="email" required>
<input placeholder="Address" type="text" name="address" required>
<input type="checkbox" id="shipping" name='shipping' />$optional Shipping($19.99)
<button name="submit" type="submit">Pay Now</button>
<input type="hidden" name="hdwtablename" id="hdwtablename" value="1">
<input type="hidden" name="hdwppproductname" id="hdwppproductname" value="Basic 175 Plan">
<input type="hidden" name="hdwppamount" id="hdwppamount" value="175">
<input type="hidden" name="hdwppcurrency" id="hdwppcurrency" value="USD">
<input type="hidden" name="hdwpplanguage" id="hdwpplanguage" value="en_US">
<input type="hidden" name="hdwok" id="hdwok" value="">
<input type="hidden" name="hdwemail" id="hdwemail" value="email+gmail.com">
<input type="hidden" name="hdwnook" id="hdwnook" value="http://">
<input type="hidden" name="hdwactivation_email" id="hdwactivation_email" value="email">
</form>
First, we detect when the shipping checkbox is changed, then we check to see if it is in a checked state. If it is in a checked state, we add the shipping cost to the hidden text box. We also need to reset the value if the user changes their mind about shipping so you need a basic IF ELSE condition on it.
Try this:
$('#shipping').change(function(){
var hdwppamount = Number($("#hdwppamount").val())
var shippingcost = 19.99;
if (this.checked) {
$("#hdwppamount").val(hdwppamount+shippingcost)
} else {
$("#hdwppamount").val(hdwppamount-shippingcost)
}
})
JSFiddle: https://jsfiddle.net/rdawkins/8qrm3mf1/14/
I need to validate a text box.user should not enter any mail id and also no numbers lengthier than 10..Please give your suggestions
As everyone else is commenting, please try to do some research before posting your question, as all of the below answers have been taken from this site's previous answers only.
Your query can be divided into two parts -
Email Validations
You can find email validation scripts already answered here and here on StackOverflow.
For PHP server-side validations, taken from here.
function validateEmail($email) {
return (bool) stripos($email,'#');
}
All the above functions will return true if the text entered is an email. So you might probably need to check for a false condition as you do not want email addresses to be entered.
Number Validations
Similarly, the check for numbers not being entered more than 10 characters, you may use:-
Simple
Javascript validation can be found here
However, there are still some unhandled cases in your question - What happens when someone enters normal text but greater than 10 characters? Should this be allowed?
Ideally it should as it is not an email, it is not a number greater than 10 digits?
<label>
Student Mobile no :
</label>
<input type="text" name="country code" value="+91" size="2"/>
<input type="tel" name="phone" size="10"/> <br> <br>
<label>
Guardian Mobile no :
</label>
<input type="text" name="country code" value="+91" size="2"/>
<input type="tel" name="phone" size="10"/> <br> <br>
<label for="email">Email :</label>
<input type="email" placeholder="Enter Email" name="email" required>
Just use either maxlength for text type input attribute inside the input tag of HTML forms or use size attribute for phone type input attribute the same.
For the email validation use type = "number" attribute in the input tag of HTML forms.
Please refer to the code above.