I have simple html form on my site:
<form action="mailer.php" method="post">
<fieldset>
<div class="column-50">
<div>
<label for="name">Name <span>*</span></label>
<input type="text" id="name" name="name" required>
<span class="mf-error-message">Error! </span>
</div>
<div>
<label for="email">Email <span>*</span></label>
<input type="text" id="email" name="email" required>
<span class="mf-error-message">Error! </span>
</div>
.... // some more fields
<input type="submit" id="submit" name="submit" value="Enter your Information">
</form>
The problem is that on iOS devices ( phone, tablet .. ) form it can be submitted without user to populate required fields.
Why is that? Is there a way to fix it on client side?
This should work. But it will be for all not only for iOS
<form action="mailer.php" method="post" id="myForm">
Then this
var form = document.getElementById('myForm');
form.noValidate = true;
form.addEventListener('submit', function(event) {
if (!event.target.checkValidity()) {
event.preventDefault();
alert('Error! You must fill all required fields.');
}
}, false);
Related
I am creating a form using html and css.
But when I keep multiple buttons inside the form tag, they act as a submit button even though one out of it was used for going back. If I keep the another button outside the form tag then the button is placed at the new line but I want both the buttons in the same line.
<form action="login.php" method="POST">
<label class="label">
email:
<input type="email" name="email"
placeholder="example#gmail.com"
maxlength="40" required>
</label>
<label class="label">
password:
<input type="password" name="password"
required>
</label>
<input class="submit" type="submit">
</form>
<button>Back</button>
Help me in this.
by default buttons in a form is type submit, so all you need to do is change the type of the button to button (<button type="button">Back</button>).
like this:
<form action="login.php" method="POST">
<label class="label">
email:
<input type="email" name="email"
placeholder="example#gmail.com"
maxlength="40" required>
</label>
<label class="label">
password:
<input type="password" name="password"
required>
</label>
<input class="submit" type="submit">
<button type="button">Back</button>
</form>
I am using anuglar.js form validation.
I want to check validation without form submit button.
This is my html.
<form name="userForm">
<input type="hidden" ng-model="StandardID" />
<div class="form-group">
<label for="email">Name:</label>
<input type="text" class="form-control" ng-model="Name" placeholder="Name" maxlength="50" required>
<span ng-show="userForm.Name.$dirty && !userForm.Name.$valid">Name is required.</span>
</div>
<div class="form-group">
<label for="pwd">Alias:</label>
<input type="text" class="form-control" ng-model="Alias" placeholder="Alias" maxlength="50" required>
</div>
<button type="submit" class="btn btn-info" ng-click="update()">Submit</button>
<button type="submit" class="btn btn-info" data-dismiss="modal">Cancel</button>
</form>
My controller js is.
$scope.update= function () {
alert($scope.userForm.Name.$valid);
if ($scope.userForm.Name.$valid) {
alert("Entry added");
}
}
It shows small dialog that says this field is required. I don't want this popup . Why span section does not show?
To do it, the key is use the name attribute in your <form> and in all of your inputs.
Following this way, angularjs will create a form instance where you can access all fields like myForm.myInput.$invalid
For example:
<form name="myForm" novalidate>
<label>My Input:</label>
<input type="text" name="myInput" ng-model="myInput" required>
<span ng-show="myForm.myInput.$dirty && myForm.myInput.$invalid">My Input is invalid.</span>
</form>
Check angular docs
HTML
<div ng-app="myApp">
<form name="cutome_form" ng-submit="submitForm()" novalidate>
<input type="text" name="name" class="form-control" ng-model="Name" placeholder="Name" maxlength="50" required>
<div ng-show="cutome_form.name.$dirty && cutome_form.name.$invalid">
<span class="error" ng-show="cutome_form.name.$error.required">The field is required.</span>
</div>
<div class="form-group">
<label for="pwd">Alias:</label>
<input type="text" name="alias" class="form-control" ng-model="Alias" placeholder="Alias" maxlength="50" required>
</div>
<div ng-show="cutome_form.alias.$dirty && cutome_form.alias.$invalid">
<span class="error" ng-show="cutome_form.alias.$error.required">The field is required.</span>
</div>
<button type="submit" ng-disabled="cutome_form.$invalid">Submit All</button>
</form>
</div>
directive
.directive('ngModel', function() {
return {
require: 'ngModel',
link: function(scope, elem, attr, ngModel) {
elem.on('blur', function() {
ngModel.$dirty = true;
scope.$apply();
});
ngModel.$viewChangeListeners.push(function() {
ngModel.$dirty = false;
});
scope.$on('$destroy', function() {
elem.off('blur');
});
}
}
});
My form is tripping up with required fields are able to be submitted without entering anything in the field. I'd like to use placeholder text but it must be reading this as a value, hence the form goes through?
I'm using the html 5 'placeholder' and 'required attributes. email address does get flagged as the placeholder text doesnt match the format i think.
Is there any way to get the form to flag the other required fields?
<form action="FormToEmail.php" method="POST" name="Competition">
<div id="text">
<input class="field" value="" type="text" name="Name" required placeholder="FULL NAME*">
<input class="field" value="" type="email" name="Email" required placeholder="EMAIL ADDRESS*">
<input class="field" value="" type="text" name="Contact-number" required placeholder="CONTACT NUMBER*">
<input class="field" value="" type="text" name="Code" required placeholder="UNIQUE CODE*">
<p>I have read the Terms and Conditions</p><input type="checkbox" name="Terms and Conditions" value="Selected" required></div>
<p >Read the Terms and Conditions.</p>
<p>* required field</p>
<input class="btn btn-draw" type="submit" name="submit" value="Submit!" />
</form>
EDIT: i recall now that i'm using the javascript below to show the placeholder text in older versions of internet explorer. This script does work for that with the knock on effect of the empty fields submitting.
I am probably best covered to leave it like this, but i'd be interested if there is any comprehensive solution to ensure placeholder text shows in older browsers and the empty fields are flagged.
$('[placeholder]').focus(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
input.removeClass('placeholder');
}
}).blur(function() {
var input = $(this);
if (input.val() == '' || input.val() == input.attr('placeholder')) {
input.addClass('placeholder');
input.val(input.attr('placeholder'));
}
}).blur().parents('form').submit(function() {
$(this).find('[placeholder]').each(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
}
})
});
Ok, you need to prevent the form submit if the input val is equal the placeholder:
}).blur().parents('form').submit(function(event) {
$(this).find('[placeholder]').each(function() {
var input = $(this);
if (input.val() === input.attr('placeholder')) {
event.preventDefault();
input.val('');
}
Are you using any plugin? In which browser is the problem?
The test don't show any problems.
https://jsfiddle.net/mcymnayz/
<form action="FormToEmail.php" method="POST" name="Competition">
<div id="text">
<input class="field" value="" type="text" name="Name" required placeholder="FULL NAME*">
<input class="field" value="" type="email" name="Email" required placeholder="EMAIL ADDRESS*">
<input class="field" value="" type="text" name="Contact-number" required placeholder="CONTACT NUMBER*">
<input class="field" value="" type="text" name="Code" required placeholder="UNIQUE CODE*">
<p>I have read the Terms and Conditions</p><input type="checkbox" name="Terms and Conditions" value="Selected" required>
</div>
<p >Read the Terms and Conditions.</p>
<p>* required field</p>
<input class="btn btn-draw" type="submit" name="submit" value="Submit!" />
</form>
And I think it's not possible to submit the form in Safari browser
This is working fine in all browsers except safari
<form action="/commonDashboard" name="loginForm" method="post" autocomplete="off" id="loginForm">
<div>
<label>User Email ID</label>
<input type="text" placeholder="Enter your Email Address" id="userEmail" name="userEmail" tabindex="1" />
</div>
<div>
<label>Password</label>
<input type="password" placeholder="Enter your password" id="userPassword" name="userPassword" tabindex="2" />
</div>
<div>
<input type="button" value="Sign In" onclick="validatelogin();" tabindex="3" />
</div>
</form>
Change type="button" to type="submit"
Remove onclick="validatelogin();"
Assuming validatelogin is NOT performing any Ajax, change <form action="/commonDashboard" to
<form action="/commonDashboard" onsubmit="return validatelogin()" and have that function return true to allow submit or false to stop
or better add
window.onload=function() {
document.getElementById("loginForm").onsubmit=validatelogin;
}
In any case, please post the function so we can see what it does
I would like to make this form below
<form enctype="application/x-www-form-urlencoded" action="http://cpanel.gateway245.com/auth" method="post">
<p class="element">
<label for="email">Email address</label>
<br/>
<input type="text" name="email" id="email" value="" placeholder="E-mail">
</p>
<p class="element">
<label for="password">Password</label>
<br/>
<input type="password" name="password" id="password" value="" placeholder="Password">
</p>
<input type="submit" name="submit" id="submit" value="Login">
</form>
So that when a link is clicked the form shows I have seen some websites with login forms like this is it possible to be done in html under div menu ui?
Showing/hiding content can't be done in HTML alone - you'll need JavaScript to handle the click event.
This is a rudimentary example to get you on the right track. Many, many, many more examples are on SO already.
CSS
#ttt { display: none; }
HTML
Click to show form
<form id="ttt"> ... </form>
JavaScript
function show(target){
document.getElementById(target).style.display = 'block';
}