Customizing parsley.js to show an icon near the offending field - javascript

I would like parsley.js to show an icon near the label of every offending field. Something like:
<label class="warning" for="name">Name</label>
(http://jsfiddle.net/7q3ktchb/)
Essentially, I would like to configure parsley to set a class of the label of the offending field.
Is that possible?

You can achieve that using the events parsley:field:success and parsley:field:error
<form id="myForm">
<label for="name">Name</label>
<input type="text" name="name" data-parsley-minlength="5" data-parsley-required="true" />
<label for="email">Email</label>
<input class="cuiMessageWarningImg" type="text" name="email" data-parsley-required="true"
data-parsley-type="email" />
<button type="submit">Submit</button>
</form>
<script>
$('#myForm').parsley();
$.listen('parsley:field:error', function(ParsleyField) {
ParsleyField.$element.prev('label').addClass('warning');
});
$.listen('parsley:field:success', function(ParsleyField) {
ParsleyField.$element.prev('label').removeClass('warning');
});
</script>
Check this working example in jsfiddle

Related

How to change form action with jQuery based on checkbox

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>

Bootstrap Material Design(4.1.1)'s bmd-label-floating not working well with autofocus attribute

1. On page load
The autofocus attribute doesn't trigger the Bootstrap-JavaScript to add the is-focused class to the corresponding (bmd-)form-group.
<fieldset class="form-group bmd-form-group">
<label for="usernameControl" class="bmd-label-floating">Username</label>
<input type="text" class="form-control text-light" required="" id="usernameControl" name="username" autofocus="">
</fieldset>
2. After some typing
When typing something in the field, the label goes up because is-filled gets added, but the focus is still not recognized.
<fieldset class="form-group bmd-form-group is-filled">
<label for="usernameControl" class="bmd-label-floating">Username</label>
<input type="text" class="form-control text-light" required="" id="usernameControl" name="username" autofocus="">
</fieldset>
3. After reselecting (desirable output)
Deselecting the text-input (with mouseclicks or the tab-key) and then selecting it again is the only way to get the is-focused class (and therefore making it look like it should).
<fieldset class="form-group bmd-form-group is-filled is-focused">
<label for="usernameControl" class="bmd-label-floating">Username</label>
<input type="text" class="form-control text-light" required="" id="usernameControl" name="username" autofocus="">
</fieldset>
Question
Is there any fix or workaround to this problem?
Bootstrap Material Design used: https://fezvrasta.github.io/bootstrap-material-design/ (Version 4.1.1)
Source/input html:
<fieldset class="form-group">
<label for="usernameControl" class="bmd-label-floating">Username</label>
<input type="text" class="form-control text-light" required="" id="usernameControl" name="username" autofocus="">
</fieldset>
My solution: Hardcoding the is-focused class to the corresponding (bmd-)form-group of the autofocused item works.
<fieldset class="form-group is-focused">
<label for="usernameControl" class="bmd-label-floating">Username</label>
<input type="text" class="form-control text-light" required="" id="usernameControl" name="username" autofocus="">
</fieldset>
<script> $('body').bootstrapMaterialDesign({}); </script>
add this to your website if you're using https://fezvrasta.github.io/bootstrap-material-design This will fix forms etc.
If you guys are using like below code it's fine (bmd-)form-group.
<input type="text" class="form-control text-light" id="usernameControl" name="username">
If you are using property like autofocus,required,readonly ect.. i:
autofocus,
required,
readonly
and alike, it wouldn't work, so you have to add a new custom class to work this scenario.

Force Focusing on Sibling Input

I'm currently working with a contact form plugin through Wordpress and so the outputted HTML and JS looks like the following:
$('.form .form--field label').click(function() {
$(this).parents('.form--field').addClass('form--field--focus');
$('input').filter(':first').focus();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form--field form--field__firstname">
<label for="firstname" class="form--field__label">First Name</label>
<span>
<input type="text" name="firstname">
</span>
</div>
The design has caused me to get a bit hacky with it but in any event, I'm trying to figure out how to force focus on the respective input whenever the user clicks on a label. At the moment, this is where I'm at with it. If anyone has any input or suggestions, that would be greatly appreciated.
the for attribute on a <label> looks for an id not a name. Example below should work without JavaScript
<div class="form--field form--field__firstname">
<label for="firstname" class="form--field__label">First Name</label>
<span>
<input type="text" id="firstname" name="firstname">
</span>
</div>
Although if you really want to do this with JavaScript/JQuery and not be tied down to using a label you can do it this way using $(this).next().children().focus();
$('.form--field__label').click(function() {
$(this).next().children().focus();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form--field form--field__firstname">
<label class="form--field__label">First Name</label>
<span>
<input type="text">
</span>
</div>
<div class="form--field form--field__secondname">
<!-- using a span instead of label as an example !-->
<span class="form--field__label">Second Name</span>
<span>
<input type="text">
</span>
</div>
set input id="firstname" because you want focus on label click. This is builtin feature in html.
<input type="text" id="firstname" name="firstname">
More details here https://www.w3schools.com/tags/tag_label.asp
for multiple input you can use it like this
<form action="/action_page.php">
<label for="male">Male</label>
<input type="radio" name="gender" id="male" value="male"><br>
<label for="female">Female</label>
<input type="radio" name="gender" id="female" value="female"><br>
<label for="other">Other</label>
<input type="radio" name="gender" id="other" value="other"><br><br>
<input type="submit" value="Submit">
</form>
If you still persist you can use it like this
$('.form--field label').click(function() {
//It will look next sibling which is span and then find input in it and then focus it
//so it doesn't focus on other children elements
$(this).next('span').find('input').focus();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form--field form--field__firstname">
<label class="form--field__label">First Name</label>
<span>
<input type="text" name="firstname">
</span>
<br>
<label class="form--field__label">Last Name</label>
<span>
<input type="text" name="lastname">
</span>
</div>

Creating multiple JavaScript error messages contact form?

I am new to JavaScript. I know how to create an alert box and now create an error message if a field was left empty in an HTML form, but can someone please show me how to display multiple error messages if more than one field is empty? Below is my HTML code for the form and JavaScript:
<form action="form.php" method="post" name="contactform"
onsubmit="return validateForm()">
<fieldset>
<legend>Your Details:</legend>
<label for="name">Name:</label><br>
<input type="text" name="name" id="name" onblur="validateForm()"><br>
<span id="error"></span>
<label for="email">Email:</label><br>
<input type="text" name="email" id="email"><br>
<label for="telephone">Telephone:</label><br>
<input type="text" name="telephone" id="telephone">
</fieldset>
<br>
<fieldset>
<legend>Your Information:</legend>
<p>
<label for="service">What service are you inquiring about?</label>
<select name="service" id="service">
<option value="Collision">Collision</option>
<option value="Mechanical">Mechanical</option>
<option value="Custom">Custom</option>
<option value="Other">Other</option>
</select>
</p>
<label for="comments">Comments:</label>
<br>
<textarea name="comments" id="comments" rows="4" cols="40">
</textarea><br>
<input type="submit" value="Submit"/>
</fieldset>
<script src="validate.test.js"></script>
</form>
function validateForm()
{
var name = document.forms["contactform"]["name"].value;
if (name == "")
{
document.getElementById('error').innerHTML="Please enter your name";
return false;
}
}
You need to surround your JavaScript code by script tag.
<script type="text/javascript">
function validateForm()
{
var name = document.forms["contactform"]["name"].value;
if (name == "")
{
document.getElementById('error').innerHTML="Please enter your
name";
return false;
}
}
</script>
One easy way is to use the required attribute on the input HTML elements.
it specifies that an input field must be filled out before submitting the form.
<form action="form.php" method="post" name="contactform"
onsubmit="return validateForm()">
<fieldset>
<legend>Your Details:</legend>
<label for="name">Name:</label><br>
<input type="text" name="name" id="name" required><br>
<span id="error"></span>
<label for="email">Email:</label><br>
<input type="text" name="email" id="email" required><br>
<label for="telephone" required>Telephone:</label><br>
<input type="text" name="telephone" id="telephone" required>
<input type="submit">
</fieldset>
Another approach is to use the javascript as you have described in your code snippet. That is useful if you need to customize the Error message for each field.
If what #alpeshpandya and #Agalo have answered solves your problem (even if not):
I think you are trying to validate only name input even if the user forgets to fill it. The onblur event fires when the input loses focus. You have some choices here: 1. you can validate when the user clicks to submit your form, 2. or putting your validateForm in the others input onblur, 3. or something else.
Validating when submitting form: a good way to validate the whole thing and set all error messages at once.
Validating using onfocus: in each input, you have to validate the other ones above it when user clicks on it (using onfocus or another event), e.g., when the user tries to go to another input, your error messages will pop.

JS Parsley validate only some fields in form

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.

Categories

Resources