I'm using parsley js in two forms in a single page. i want to trigger parsley validator when i click on a type='button' field and validate the first form to check only 3 fields of the form. Initially there are around 7 fields in the form included for validation. So far I couldn't make it work. tried this but no luck.
any idea?
update: this is my code;
<div class = 'two'>
<input type='text' id='firstname' name='firstname' />
</div>
$('#form').parsley({
excluded: '.two input'
});
$('#form').parsley('validate');
i just tried to exclude one field and test if the form is validating as i want it to be. But still it validates input field inside css class 'two'. that's all i have done so far. no clue..
You have a couple of issues with your code, specifically with this line:
<dir classs = 'two'>
that should be
<div class = 'two'>
That is, you have dir instead of div and classs instead of class. You should also use $('#form').parsley().validate() instead of $('#form').parsley('validate').
The following code will work:
<form method='post' id='form'>
<div class = 'two'>
<input type='text' id='firstname' name='firstname' required />
</div>
<div>
<input type='text' id='thisisrequired' name='thisisrequired' required />
</div>
<button type="button" id="submit-form">Submit</button>
</form>
<script>
$(document).ready(function() {
$('#form').parsley({
excluded: '.two input'
});
$("#submit-form").on('click', function() {
$('#form').parsley().validate();
if ($('#form').parsley().isValid()) {
console.log('valid');
} else {
console.log('not valid');
}
});
});
</script>
You can view a more complete working example in this jsfiddle
For your case, you should consider using data-parsley-group (see the docs) to achieve the same result, with the following code:
<form method='post' id='form'>
<div>
<input type='text' id='firstname' name='firstname' data-parsley-group="first"
required />
</div>
<div>
<input type='text' id='thisisrequired' name='thisisrequired'
data-parsley-group="second" required />
</div>
<button type="button" id="submit-form">Submit</button>
</form>
<script>
$(document).ready(function() {
$('#form').parsley();
$("#submit-form").on('click', function() {
$('#form').parsley().validate("second");
if ($('#form').parsley().isValid()) {
console.log('valid');
} else {
console.log('not valid');
}
});
});
</script>
The difference between the two, is that in the first example you redefine the excludedoption. In the second example you would use data-parsley-group and validate only that group.
For a complete example, visit this jsfiddle (you can test it and change $('#form').parsley().validate("second"); to $('#form').parsley().validate("first"); to see what happens).
just an add on to the answer above, to work correctly ,
use group name in isValid too,ie $('#form').parsley().isValid("second")).
<script>
$(document).ready(function() {
$('#form').parsley();
$("#submit-form").on('click', function() {
$('#form').parsley().validate("second");
if ($('#form').parsley().isValid(**"second"**)) {
console.log('valid');
} else {
console.log('not valid');
}
});
});
</script>
Related
When clicking theinviteButton, the input search bar should clear out, but it doesn't work with my current code.
Am I targeting the element incorrectly?
$("#inviteButton").click(function(){
var userName = $("#searchUser").val();
if (userName.trim() != "") {
if (userName == myUserName) {
$("#connectToBox").append("You can't invite yourself");
$("#searchUser").empty(); // Doesn't work
} else {
socket.emit("checkUserConnect", userName, function(data){
if (data.result === undefined) {
console.log("No name");
$("#connectToBox").append("User does not exist");
$("#searchUser").empty(); // Doesn't work
} else {
console.log("name exists");
$("#searchUser").empty(); // Doesn't work
$("#connectToBox").append("Invite send");
UserID = data.result.id;
socket.emit("connectToUser", myUserName, UserID, currentConversation);
}
});
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="connectToBox">
<label for="search-2">Type in username</label>
<input type="search" name="search-2" id="searchUser" value="">
Connect
</div>
To empty an input field you would normally use:
$('#searchUser').val('')
Empty is used to clear away child nodes from elements like divs or p tags, but not for inputs.
Reason for that is that the text within an input is not represented as a child node of the element and instead stored on an html attribute of the input tag. Hence .empty() does not work for clearing the value.
You can clear the input field by using
$('#searchUser').val('');
$('#searchUser').val('');
This will work fine according to your application.
The empty() method removes all child nodes and content from the selected elements. Src: W3Schools
According to your requirement you need to reset the value of an input field, for that we have val() function. You can assign an empty string and it will work fine.
Using empty() won't work here.
Check these examples -
empty() working correctly -
function emptyOperation(){
$("div").empty();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type="text" id="input-field" value="Random string">
</div>
<button onclick="emptyOperation()">Check</button>
empty() as per your code [won't work] -
function emptyOperation(){
$("#input-field").empty();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type="text" id="input-field" value="Random string">
</div>
<button onclick="emptyOperation()">Check</button>
Solution to your problem -
function emptyOperation(){
$("#input-field").val('');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type="text" id="input-field" value="Random string">
</div>
<button onclick="emptyOperation()">Check</button>
Relatively new to html coding, and very new with javascript. On this page, I don't want the option to email an editor to become visible until a tripID is filled in (but form not submitted yet). Here is the form so far without that option added yet:
TripID:
<input type='text' id='atripid' name='atripid' size='6' maxlength='6' /><br><br>
Port:
<input type='text' id='aport' name='aport' size='6' maxlength='6' /><br><br>
<div id=acheckbox><br> E-mail editor? </b>
<input type='checkbox' name='acheck' onchange='copyTextValue(this);'/><br>
<div id='div' style='display:none'>
<br> <b>Subject:</b> <input type='text' id='asubject' name='asubject' size='70' maxlength='75'/><br><br>
<textarea name='aemailbody' cols='85' rows = '10'>Explain any packaging or labeling mistakes here...</textarea>
</div>
</div>
<script>
function copyTextValue(bf) {
if(bf.checked){
document.getElementById('div').style.display = 'block';
var atext = 'Frozen Sample Error Notice: '+ document.getElementById('atripid').value;
}else{
document.getElementById('div').style.display = 'none';
var atext = '';
}
document.getElementById('asubject').value = atext
}
</script>
</div>
Now to hide the email editor option until tripid is filled in, I got something like this to work on jfiddle:
<form action="">
tripid:<input type="atripid" id="atripid" value="">
port:<input type="aport" id="aport" value="">
</form>
<div id="acheckbox" style="display:none">
<br><br><br>
This is where the email options (subject and textbox) would appear.
</div>
<script>
$("#atripid").keyup(function(){
if($(this).val()) {
$("#acheckbox").show();
} else {
$("#acheckbox").hide();
}
});
</script>
But for some weird reason, it won't work anywhere else, so I can't figure out how to incorporate it into what I already have. Does anyone have any ideas that could help me? Thanks!
You can do something like this with pure javascript:
<input type="atripid" id="atripid" value="" onkeyup="keyupFunction()">
And define your keyupFunction().
See jsfiddle
The code you attempted on jsfiddle requires that you import jquery.js files. An alternate way of doung what you intend to do is
<input type='text' id='atripid' name='atripid' size='6' maxlength='6' onkeyup="toggleCheckBox(this)" />
<input type='checkbox' name='acheck' id="acheckbox" style="display:none;" onchange='copyTextValue(this);'/>
with js
function toggleCheckBox(element) {
if(element.value=='') {
document.getElementById('acheckbox').style.display = 'none';
}
else {
document.getElementById('acheckbox').style.display = 'block';
}
}
The issue is the .keyup() method, which is not consistent across browsers and does not account for other means of user input. You would rather, use an Immediately Invoked Function Expression (IIFE) that will detect the propertychange of the input field in question and then to fire the desired event if the condition is met. But for the purposes of simplicity, and the fact that I'm not as well versed enough in IIFE syntax, simply bind some events to the input field, like so:
$("#atripid").on("keyup change propertychange input paste", (function(e) {
if ($(this).val() === "") {
$("#acheckbox").hide();
} else {
$("#acheckbox").show();
}
}));
#acheckbox {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<form action="">
tripid:
<input type="atripid" id="atripid" value="">port:
<input type="aport" id="aport" value="">
</form>
<div id="acheckbox">
<br>
<br>
<br>This is where the email options (subject and textbox) would appear.
</div>
I am trying to achieve the reverse of the following form function. This is working in the reverse to how I want it to function. I would like to have the form elements disabled by default and then enabled when the "clicker" is pressed. I am experimenting with the following code without success. I have no problems with the HTML, my problem is getting the script to function the way that I want it to.
SAMPLE HTML FORM ELEMENTS
<input type='text'></input>
<input type='text'></input>
<input type='text'></input>
<div id='clicker' style='background-color:#FF0000; height:40px; width:100px;'></div>
This is the JavaScript I am trying:
$().ready(function() {
$('#clicker').click(function() {
$('input').each(function() {
if ($(this).attr('disabled')) {
$(this).removeAttr('disabled');
}
else {
$(this).attr({
'disabled': 'disabled'
});
}
});
});
});
Should use prop() not attr() for disabled.
You can also use prop(propertyName, fn) to create the loop and isolate instances
$(function () {
inputs_toggle_disable();//disable on page load, assumes none have disabled in markup
$('button').click(inputs_toggle_disable);
});
function inputs_toggle_disable() {
$('input').prop('disabled', function () {
return !this.disabled
});
}
DEMO
It looks like you're missing the disabled attribute from your HTML inputs, simply add the attribute as shown below:
<input type='text' disabled />
<input type='text' disabled />
<input type='text' disabled />
Your clicker button then will remove this attribute (See JSFiddle).
http://jsfiddle.net/xredrdur/
hello guys I have a login page with two inputs username and password and one button. I want to put a class on that button after password field has first character filled in. How can I do that , Thank's. If is possible to do that only with css will be awesome, or a small script to add a class on that button.
<form>
Username <input type="text" name="first" id="first" /><br/><br/>
Password <input type="text" name="last" id="last" />
<br/>
</form>
<input class="crbl" type="submit" name="last" id="last" value="login button" />
css
/*Normal State*/
.crbl{
margin-top:10px;
border:1px solid #555555;
border-radius:5px;
}
/*after password field has one character filled in state*/
.class{
???
}
fiddle:
http://jsfiddle.net/uGudk/16/
You can use toggleClass and keyup methods.
// caching the object for avoiding unnecessary DOM traversing.
var $login = $('.crbl');
$('#last').keyup(function(){
$login.toggleClass('className', this.value.length > 0);
});
http://jsfiddle.net/5eYN5/
Note that IDs must be unique.
You can do that using javascript. FIrst thing you need to put on password input the following event
Password <input type="text" name="last" id="last" onkeyup="myFunction(this);"/>
Then you define the javascript function:
function myFunction(element) {
if (element.value != '') {
document.getElementById('last').attr('class','password-1');
} else {
document.getElementById('last').attr('class','password-0');
}
}
You may try like this demo
jQuery(document).ready(function(){
jQuery('#last').keyup(function(event){
var password_length =jQuery("#last").val().length;
if(password_length >= 1){
jQuery("#last_button").addClass('someclass');
}
else
{
jQuery("#last_button").removeClass('someclass');
}
});
});
This is the best way to handle the entire input, with the "on()" Jquery method.
Use the very first parent
<form id="former">
Username <input type="text" name="first" id="first" /><br/><br/>
Password <input type="text" name="last" id="last" />
<br/>
</form>
<input class="crbl" type="submit" name="last" id="last_btn" value="login button" />
Then in Jquery
$("#former").on('keydown, keyup, keypress','#last',function(e){
var value = $(this).val();
if ( value.length > 0 ) {
$("#last_btn").addClass('class'):
}else{
$("#last_btn").removeClass('class');
}
});
With "on" method you can handle many event of the input as you can see...
make sure your ID is unique.. since you have two IDs with the same name in fiddle.. i changed the password id to 'password'...
use keyup() to check the key pressed.. and addClass() to add the class..
try this
$('#password').keyup(function(){
if($(this).val()==''){
$('#last').removeClass('newclassname'); //if empty remove the class
}else{
$('#last').addClass('newclassname'); // not not empty add
}
});
fiddle here
<script type="text/javascript">
$('#YourTextBoxId').keyup(function (e) {
if ($(this).val().length == 1) {
$(this).toggleClass("YourNewClassName");
}
else if ($(this).val().length == 0) {
$(this).toggleClass("YourOldClassName");
}
})
</script>
Test this:
http://jsfiddle.net/uGudk/33/
Please consider using unique id for all form elements, and use unique input name also.
$(document).ready(function(){
$("input[name=last]").keydown(function () {
if($(this).val().length > 0){
$(this).attr("class", "class");
//or change the submit button
$("input[type=submit]").attr("class", "class");
//or if you want to enable it if originally disbaled
$("input[type=submit]").removeAttr("disabled");
}
});
});
I need to validate two things on this form:
1. There are two radio buttons:
• OPTION 1 - On click function hides mm/dd/yyyy fields for OPTION 2
• OPTION 2 - On click function shows mm/dd/yyyy fields which aren't required.
2. Zip code field - Need to validate an array of acceptable zip codes.
I've got this form MOSTLY working aside from a few issues:
1. If you click submit without checking or filling out anything it replaces some of the text on the page with the word "Invalid" and vice versa when valid info has been filled in.
2. It does not go to the next page if valid info has been submitted.
3. It only validates the zipcode field and does not require the radio buttons.
Any help would be greatly appreciated! Thanks!
Test page here: http://circleatseven.com/testing/jquery/zipcodevalidation/
If i have you understand you search for this:
I dont have write a Message with "invalid", i give an alert.
In your HTML add "onsubmit" to your form-Tag:
<form method="post" action="success.php" id="step1" onsubmit="checkdata();">
and add a submit-Button to your form or trigger on your pseudo-submit-button .submit() with jQuery.
In your Javascript you add following function:
function checkdata() {
if ($(":radio:checked").length < 1) {
alert('Please choose an Option!');
return false;
}
zipCodeOk = false;
zipCodes = new Array(75001, 75002, 75006); //Your Zip-Codes
for (var i = 0; i <= zipCodes.length; i++) {
if ($('#enterZip').val() == zipCodes[i]) {
zipCodeOk = true;
break;
}
}
if (!zipCodeOk) {alert('Please enter a valid Zip-Code!');return false;}
}
A friend helped me out.. We ended up using the Jquery validate plugin - here's what we came up with:
<script type="text/javascript">
$(document).ready(function(){
jQuery.validator.addMethod("validZip", function(value) {
var zips=['12345', '23456', '34567', '45678', '56789', '67890', '78901', '89012', '90123', '01234'];
if ($.inArray(value,zips) > -1) {
return true;
} else {
return false;
}
}, "invalid zip");
$("#step1").validate({
rules: {
currentServiceStatus: "required",
enterZip: { validZip : true }
}
});
$('.moveInDates').hide();
$(":radio:eq(0)").click(function(){
$('.moveInDates').hide();
});
$(":radio:eq(1)").click(function(){
$('.moveInDates').show();
});
});
</script>
And here's the html:
<form method="post" action="success.php" id="step1">
<h1>CHOOSE *</h1>
<input name="currentServiceStatus" type="radio" value="Switch Me" /> OPTION 1
<br/>
<input name="currentServiceStatus" type="radio" value="Move-In" /> OPTION 2 (reveals more fields on click)
<div id="dateInputs" class="moveInDates">
<h2>Move-In Date (not required)</h2>
<p><span class="mmddyyyy"><input name="moveInDateMonth" type="text" class="text" id="moveInDateMonth" /> / <input name="moveInDateDay" type="text" class="text" id="moveInDateDay" /> / <input name="moveInDateYear" type="text" class="text" id="moveInDateYear" /></span>
</div>
<hr/>
<h1>ZIP CODE *</h1>
<p>Enter one of the following acceptable Zip Codes:</p>
<p>12345, 23456, 34567, 45678, 56789, 67890, 78901, 89012, 90123, 01234</p>
<input name="enterZip" type="text" class="text" id="enterZip" />
<hr/>
<input type="image" id="submitButton" src="http://circleatseven.com/testing/jquery/zipcodevalidation/library/images/btn_submit.jpg" />
<p><em>* Required</em></p>
</ul>