Here I have an form and I validate that form with parsley js:
<form id="form" parsley-validate>
<label for="name">Name</label>
<input type="text" name="name"
parsley-minlength="5"
parsley-required="true"
/>
<label for="lname">Last Name</label>
<input type="text" name="lname"
parsley-minlength="5"
parsley-required="true"
/>
<label for="email">Email</label>
<input type="text" name="email"
parsley-required="true"
parsley-type="email"
/>
<!--
<label for="email">Password</label>
<input type="password" name="pw" id="pw"
parsley-minlength="8"
parsley-required="true"
/>
<input type="password" name="pw-verify"
parsley-equalto="#pw"
parsley-required="true"
/>
-->
<button type="submit">Submit</button>
</form>
<button id="validate" >VALIDATE ONLY NAME and Last Name</button>
but now I need when I click on button id=validate to validate only name and lname fields in form, so I dont want to submit form just want to validate that fileds?
Is that possible?
DEMO: http://jsfiddle.net/RT5aN/405/
You can use validation groups (data-parsley-group). See this SO question.
You can also fire validation whenever you want. It doesn't have to be only at submission. Just wire up a button to a function and call:
$('#myForm').parsley().validate("my-validation-group");
or omit the group name and it'll validate everything.
Related
I have read previous posts on this and have tried to apply the onsubmit on my form element in HTML but still doesn't seem to work. I have it as follows:
<form class="button" id="arrow" onsubmit='return hotelList()'>
<input type='submit' value='Submit'/>
</form>
and js:
const hotelList = () => window.location.href = './ochome.html';
Any suggestions? Thank you
Full code:
New Question: my required field does not seem to be working, and the sends me to the other page regardless....
enter code here
<form action="/user-details.html" class='login'>
<!-- is this GET or POST?? -->
<label for="username" >Username</label><br>
<input class="whitebox" type="text" id='username' required/>
<label for="pass" id='pass'>Password</label><br>
<input class="whitebox" type='password' id='passBox' required/>
<input type="submit" id='arrow' value="> Submit">
</form>
the form contains all the input you want to submit and the action is like: action="/file.js" and it has to be a file which handles the data
the code:
<form action="/user-details.html">
<label for="fname">First name:</label><br>
<input class="whitebox" type="text" id='username' required/>
<label for="lname">Last name:</label><br>
<input class="whitebox" type='password' id='passBox' required/>
<input type="submit" value="Submit"/>
</form>
My registration script has 2 hidden input fields that change to two set variables based on the user input. The form button is disabled by default. My issue is getting the button to be enabled once the two hidden input fields match the set variable.
<form id="register_form" autocomplete="off" method="post" action="">
<h1>Register</h1>
<div id="error_msg"></div>
<div id="pass"><span id='user'></span></div>
<div id="pass"><span id='message'></span></div>
<div id="pass"><span id='message2'></span></div>
<div>
<input type="text" name="username" placeholder="Username" id="username" autocomplete="off" required>
</div>
<div>
<input type="email" name="email" placeholder="Email" id="email" autocomplete="off" required>
</div>
<div class="radio">
<input type="radio" name="opt" value="Yes" checked> Receive Emails for Promotions and Newsletters
<br>
<input type="radio" name="opt" value="No"> Don't Receive Emails for Promotions and Newsletters
</div>
<div>
<input type="password" name="new_password" placeholder="Enter Password" id="new_password" autocomplete="off" required>
</div>
<div>
<input type="password" name="new_password2" id="new_password2" placeholder="Confirm Password" autocomplete="off" required>
</div>
<div>
<input type="text" name="user-response" id="user-response">
</div>
<div>
<input type="text" name="pass-response" id="pass-response">
</div>
<div>
<input type="hidden" name="g-recaptcha-response" id="g-recaptcha-response">
</div>
<div>
<button type="submit" id="reg_btn" class="button" name="register" disabled="disabled">Register Account</button>
</div>
</form>
$(function(){
var user = $('#user-response').val();
var pass = $('#pass-response').val();
if(user === 'available' && pass === 'match'){
$("#reg_btn").prop("disabled", false);
} else {
$("#reg_btn").prop("disabled", true);
}
});
When a user enters a username that doesn't exist the 1st "hidden" input field will display available. When a user enters a matching password that meets the requirements it displays match. When those two fields say available and match the button should switch to enabled but it remains disabled.
Iam working on login page of my website. Using same login page the users and admin can login to website I have given two options(checkbox) based on than the form action should cange but it is not woking properly.
The form is This
<form method="post" id="loginForm">
Username <input placeholder="email" class="form-control" name="email" id="email" type="text" required="">
Password <input placeholder="Password" id="password" class="form-control" name="password" type="password">
<input type="checkbox" id="user" checked="checked"> User
<input type="checkbox" id="adminAction"> Admin
forgot password?
<input type="submit" value="Log In">
Register Now
</form>
And this is the jquery code
<script>
if($('#adminAction').is(':checked')){
$('#loginForm').attr('action','/adminLogin');
}
else{
$('#loginForm').attr('action','/userLogin');
}
</script>
As Dante mentioned, it's probably not a great idea to toggle between form actions on the client side. But all that aside, I think your issue is that you didn't put $(document).ready in your script. Furthermore, you should probably set an initial action in your form of action='/userLogin' since there's no action when the page initially loads, and there's no trigger in your code to change anything when the checkbox gets changed. Try something like this:
<form method="post" id="loginForm">
Username <input action='/userLogin' placeholder="email" class="form-control" name="email" id="email" type="text" required="">
Password <input placeholder="Password" id="password" class="form-control" name="password" type="password">
<input type="checkbox" id="user" checked="checked"> User
<input type="checkbox" id="adminAction"> Admin
forgot password?
<input type="submit" value="Log In">
Register Now
</form>
<script>
$(document).ready(function(){
$('#adminAction').change(function(){
var checked = $('#adminAction').is(':checked');
if(checked){
$('#loginForm').attr('action','/adminLogin');
}
else{
$('#loginForm').attr('action','/userLogin');
}
})
});
</script>
I am using the PHP & MySQL to submit a form with following code and using isset function in PHP to submit the value to database.
<div class="display">
<form action="" method="POST">
<div>
<input type="text" name="name" placeholder="Your Name" required="required">
</div>
<div>
<input type="text" name="phone" id="phone" placeholder="Mobile" required="required" onblur="check();">
<br/>
<span id="e_mobile"></span>
<?php if(isset($_GET["r"])){ ?><p>Invalid number; must be ten digits. Please submit your query again</p><?php } ?>
</div>
<div>
<input type="text" name="landline" id="landline" placeholder="Alternate Number" required="required" onblur="check1();">
<br/>
<span id="e_landline"></span>
</div>
<div>
<input type="email" name="email" placeholder="Email" required="required">
</div>
<div>
<input type="text" name="address" placeholder="Your Address" required="required">
</div>
<div>
<input type="hidden" value="0" name="salesid"/>
</div>
<input type="submit" name="submit" value="Submit">
</form>
</div>
Now I want once the user click submit button once the button should freeze; as of now if the user clicks the submit button more than once(by intentionally or by mistake) the same information is getting submitted in the database more than once.
What to do in this circumstance?
Try with JQuery:
First add an ID to your form
<form action="" method="POST" id="form">
After that add script:
<script type="text/javascript">
$(document).ready(function() {
$("#form").submit(function(e){
$("input[type='submit']").attr("disabled","disabled");
});
});
</script>
You can add PHP Captcha to prevent user click again.
Please review below two urls which includes demo too.
http://www.w3schools.in/php/captcha/
http://99webtools.com/blog/php-simple-captcha-script/
I want to remove the "please fill out this field" pop-up as validation and normal validations which are declared should display.
Html:
<div class="panel-body">
<form role="form" id="createForm" v name="createForm" ng-submit="createAdminGroup(adminGroupData)">
<div class="form-group" ng-class="{ 'has-error' : createForm.firstName.$invalid && !createForm.firstName.$pristine}">
<label class="label1">First Name</label>
<input name="firstName" id="firstName" class="form-control" placeholder="First Name" name="firstName" type="text" ng-model="adminGroupData.firstName " required/>
<span style="color:red" ng-show="createForm.firstName.$invalid && !createForm.firstName.$pristine">Please enter first name</span>
</div>
<div class="form-group">
<label class="label1">Last Name </label>
<input name="lastName" id="lastName" class="form-control" placeholder="Last Name" name="lastNmae" type="text" ng-model="adminGroupData.lastName" />
</div>
<div class="form-group">
<label class="label1"> Email Id </label>
<input type="email" name="email" id="email" class="form-control" placeholder="email#xyz.com" value=""ng-model="adminGroupData.email"/>
</div>
<div class="form-group">
<label class="label1"> Password </label>
<input name="password" id="password" class="form-control" placeholder="password" value="" ng-model="adminGroupData.password" />
</div>
<button name="submit" type="submit" class="btn btn-success" id="" ng-disabled="userForm.$invalid">Save</button>
<button class="btn btn-default" id="cancel" type="button" onclick='handleCancelCreateAdmin()'> Back </button>
</form>
</div>
Add novalidate attribute to your form to disable browser default validation
For Ex
<form role="form" novalidate id="createForm" v name="createForm" ng-submit="createAdminGroup(adminGroupData)">
Find more here
Add the attribute formnovalidate inside your submit button:
Example:
<button name="submit" type="submit" formnovalidate class="btn btn-success">Save</button>
This will disable only the browser form validation. You still have the validation from your AngularJS code.
You can see the W3C specification here
I had the same problem a few days ago and that's how I managed to solve
I just tried this and it worked:
oninvalid="this.setCustomValidity(' ')" oninput="this.setCustomValidity('')" >
I have add a space between the two single quotes.
Since i added a bootstrap tooltip on my input fields and required, the invalid input comes to focus and displays the tooltip value.
It was simpler than I thought it would be.
title=""
The tooltip appears even when input is outside of form and for those cases it does not work the novalidate.
One solution is to remove required, but if you have a large codebase then a quick hack will be to add title="".
<input type="text" required title="" />