REQUIRED triggering VALIDATION - javascript

Okey comunity,
I need help with my code, so this is my form code
<form action="input.php" method="POST">
<input type="text" class="input" name="firstname" placeholder="First Name" required>
<input type="text" class="input" name="lastname" placeholder="Last Name" required=""><br>
<input type="text" class="input lower" name="streetnumber" placeholder="Street / Number" required=""><br>
<input type="text" class="input lower" name="city" placeholder="City" required=""><br>
<input type="text" class="input lower" name="country" placeholder="Country" required=""><br>
<button type="submit">Add User</button>
</form>
All I want to do is to ask if my 'required' in input can trigger validation. Type of validation I need basicly is NOT NULL and I want to have paragraph above each input to show up with text (This filed is a must).
If you find my question confusing please write a comment and I will provide more info.
I know I must use some JS code, but I would realy be glad if you can help me with that code and tell me what I need.
Best regards comunity

var country = document.getElementById("country").value;
var p = document.getElementById("pcountry");
if (!country) {
pn.classList.add("show");
return false;
} else {
return true;
}
This is my answer

Related

How can I make my form only except values that the user entered that are between 1 - 100 (e.g like for the age box)

I want this to apply to the age input box and to only except the values that are between 1 - 100,in 'javascript'.
<h1>Form</h1>
<form name="form" onsubmit="myFunction()" method="post" action="">
<div>
<input type="text" required minlength="3" maxlength="20" placeholder="Enter your first name">
</div>
<div>
<input type="text" minlength="3" maxlength="20" required placeholder="Enter your last name">
</div>
<div>
<input id="age" required name="number" type="number" placeholder="Enter your age">
</div>
<div>
<input type="text" required placeholder="Enter your email">
</div>
<div>
<input type="submit" required value="Submit">
</div>
</form>
The attributes min and max is probably what you're looking for.
<input id="age" required name="number" type="number" placeholder="Enter your age" min="1" max="100">
You may need to clarify what you mean by "only except the values that are between 1 - 100,in 'javascript'." if not.

Get the content of a form when the button is pressed using javascript

I have a webpage that has multiple forms everywhere, in some pages, there are 4 or 5 forms at once. At this time I get the form input field's contents targeting its specific name (using jQuery):
html
<input id="lastname" name="lastname" type="text" class="form-control" placeholder="Last name*">
js
var lastname = $("[name='lastname']").val();
Nonetheless, this is not scalable, I need to add more variables every time I add more HTML Forms with their unique names (All of the forms are conformed with the same 4 fields). I want to implement a vanilla javascript function that can handle all forms when submit button is pressed this is how I have it now:
//At this momment I get the values using jQuery, targeting the specific input name:
$('.btn').click(function(){
$('.btn').attr("disabled", true);
var name = $("[name='name']").val();
var lastname = $("[name='lastname']").val();
var phone = $("[name='phone']").val();
// make a var for every input field known
//stuff to send it via ajax to an external api:
/*
{ ... }
*/
}
<form>
<label for="name">Name*</label>
<input type="text" placeholder="name here" id="name" name="name" required>
<label for="lastname">Last Name*</label>
<input type="text" placeholder="last name here" id="lastname" name="lastname" required>
<label for="phone">Phone Number*</label>
<input type="text" placeholder="phone # here" id="phone" name="phone-2" required>
<button class="btn" onclick="process()">Submit</button>
</form>
<form>
<label for="name-2">Name*</label>
<input type="text" placeholder="name here" id="name-2" name="name-2" required>
<label for="lastname-2">Last Name*</label>
<input type="text" placeholder="last name here" id="lastname-2" name="lastname-2" required>
<label for="phone-2">Phone Number*</label>
<input type="text" placeholder="phone # here" id="phone-2" name="phone-2" required>
<button class="btn" onclick="process()">Submit</button>
</form>
<form>
<label for="name">Name*</label>
<input type="text" placeholder="name here" id="name-3" name="name-3" required>
<label for="lastname">Last Name*</label>
<input type="text" placeholder="last name here" id="lastname-3" name="lastname-3" required>
<label for="phone">Phone Number*</label>
<input type="text" placeholder="phone # here" id="phone-3" name="phone-3" required>
<button class="btn" onclick="process()">Submit</button>
</form>
I want to have only 1 javascript function that receives the entire form (when the button is clicked) and internally traverses the form element to get the values of the field and this way, it can be reusable to all forms
The javascript function should receive the element first, then traverse to parent element:
HTML
<form>
<label for="name">Name*</label>
<input type="text" placeholder="name here" id="name" name="name" required>
<label for="lastname">Last Name*</label>
<input type="text" placeholder="last name here" id="lastname" name="lastname" required>
<label for="phone">Phone Number*</label>
<input type="text" placeholder="phone # here" id="phone" name="phone-2" required>
<button class="btn" onclick="process(this)">Submit</button>
</form>
Using onclick="process(this)" in the button, this way it will call the javascript function associated with and sending the element where the click was made.
js
process(element){
var form = element.closest('form')
// now you can extract the input field of this specific form.
}
Now you can get the input fields as needed using:
Get all the elements of a particular form

jquery enable submit button when all fields are complete including date field

I have the following html:
<form >
<input type="text" name="username" id="username" value="" placeholder="User name" />
<input type="password" name="password" id="password" value="" placeholder="Password" />
<input type="password" name="password" id="confirm_password" value="" placeholder="Confirm Password" />
<input type="email" name="email" id="email" value="" placeholder="Email" />
<input type="text" name="firstname" id="firstname" value="" placeholder="First name" />
<input type="text" name="lastname" id="lastname" value="" placeholder="Last name" />
<input type="date" name="date" id="date" placeholder="date" />
<ul class="actions align-center">
<li><input type="submit" value="Register" id="register" disabled="disabled"/></li>
</ul>
</form>
Also the following javascript:
(function() {
$('form input').keyup(function() {
var empty = false;
$('form input').each(function() {
if ($(this).val() == '') {
empty = true;
}
});
if (empty) {
$('#register').attr('disabled', 'disabled');
} else {
$('#register').removeAttr('disabled');
}
});
})()
I can get button to be disabled then enabled without date input, but as soon as i put in the date input, the button does not become enabled. Why is this?
Edit: it works but user has to type in date, but how can i enable it when user just selects date by clicking?
jsfiddle link
It's because you are using the keyup event but when you click a date, that's not a key up event. This can be solved by changing keyup to change.
$('form input').change(function() {
https://jsfiddle.net/hn6tf36L/1/

Google chrome autofill is not working on all machines

I developed a pages and I put autocomplete attributes in every text input according to google https://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill?hl=en , but the problem is very strange. The problem is taht it is working on my machine properly and after deploying on my test environment it working there as well but only on my machine, when I am testing it on other team members machine it is not working there.
Th form that I made is exactly same as this form https://greenido.github.io/Product-Site-101/form-cc-example.html.
If you test it in you chrome browser it'll work for you, I also have added personal information into chrome by going through advanced setting and filling autofill profile there.
As you can test my plunker example to test and see problem. https://embed.plnkr.co/SKkAJ2lHQHElNbyvGrmp/
I have searched a lot for solution but nothing was related to this, like people are talking about autocomplete off, go to google chrome setting and setting profile and etc.
Try to use <form> and put data-input attribute it'll work.
<form>
<input type="text" required ng-model="vm.Model.Contact.Name" name="Name" id="Name" maxlength="250" data-input="name" autocomplete="name" /> <input type="email" required ng-model="vm.Model.Contact.Email" name="Email" id="Email" maxlength="100" data-input="email" autocomplete="email" /> <input type="text" required ng-model="vm.Model.Contact.Mobile" name="Mobile" id="Mobile" maxlength="30" data-input="tel" autocomplete="tel" />
<input type="text" ng-model="vm.Model.Contact.Telephone" name="Telephone" id="Telephone" maxlength="30" data-input="tel" autocomplete="tel" />
</form>
in your input tag the name attribute start with uppercase latter
try to change it lowercase latter and it should work
your code:
Name: <input type="text" required="" ng-model="vm.Model.Contact.Name" name="Name" id="Name" maxlength="250" autocomplete="name"> <br> <br>
Email: <input type="email" required="" ng-model="vm.Model.Contact.Email" name="Email" id="Email" maxlength="100" autocomplete="email"> <br> <br>
Mobile: <input type="text" required="" ng-model="vm.Model.Contact.Mobile" name="Mobile" id="Mobile" maxlength="30" autocomplete="tel"> <br> <br>
Phone: <input type="text" ng-model="vm.Model.Contact.Telephone" name="Telephone" id="Telephone" maxlength="30" autocomplete="tel"> <br> <br>
fix code
Name: <input type="text" required="" ng-model="vm.Model.Contact.Name" name="name" id="Name" maxlength="250" autocomplete="name"> <br> <br>
Email: <input type="email" required="" ng-model="vm.Model.Contact.Email" name="email" id="Email" maxlength="100" autocomplete="email"> <br> <br>
Mobile: <input type="text" required="" ng-model="vm.Model.Contact.Mobile" name="mobile" id="Mobile" maxlength="30" autocomplete="tel"> <br> <br>
Phone: <input type="text" ng-model="vm.Model.Contact.Telephone" name="telephone" id="Telephone" maxlength="30" autocomplete="tel"> <br> <br>

Textbox focus jumps to next textbox automatically on mobile safari(ios 5)

i have form with following input field. when i click on first text box , the focus gets transfer to next textbox.i am using this code in phonegap and running it on iphone(ios 5).please help me out..
<form id="createAccount" name="regForm">
<input type="text" name="first_name" id="fname" placeholder="First Name" style="height:40px;" >
<input type="text" name="last_name" id="lname" placeholder="Last Name" style="height:40px;">
<input type="email" name="email" id="email" placeholder="Email" style="height:40px;">
<input type="password" name="password" id="RegPassword" placeholder="Password" style="height:40px;">
</form>
First try to remove your wrong inside form, then add tabindex on each input.
Moreover, do you use any lib? (jquery...?)

Categories