I am using JQuery validation plugin jquery.validate for validating my form inputs in this manner like this:
<form id="loginForm" name="loginForm" action="" method="POST">
<input name="username" type="text" />
<input name="password" type="password" />
<input type="submit" value="Login!" />
</form>
</div>
<script>
$("#loginForm").validate({ rules: { username: "required", password: "required" } });
While above works fine, I also needed input validation for elements which are not inside a form and they are being sent to the server dynamically using jQuery etc. so my question is, is it possible to validate such individual elements which are not inside form elements using jQuery Validation, like these:
<tr>
<td><label>Product Name</label></td>
<td colspan="2">
<select name="prdNme" id="prdNme" placeholder="Enter Product Name..." >
<option data-id='' data-pnme='' data-price='' value=''></option>
</select></td>
</tr>
<tr>
<td><label>Quantity</label></td>
<td colspan="2">
<input type="text" style="width: 80px" placeholder="Quantity" id="qntty" /></td>
</tr>
If yes than how? and if no than how can i validate them without writing my whole new validating functions?
Quote OP:
"... I also needed input validation for elements which are not inside a form ... so my question is, is it possible to validate such individual
elements which are not inside form elements using jQuery Validation"
No. It is not possible to validate any input elements not contained within <form></form> tags using the jQuery Validate plugin.
All input elements must be contained within form tags and .validate() attached to the form element to initialize the plugin. There is no other way. This is by design.
See: documentation...
"Validate forms like you've never been validating before!"
Quote OP:
"if no, then how can I validate them without writing my whole new validating functions?"
Why would you need to re-write anything? Simply wrap your input elements within a set of <form></form> tags.
Related
I have 2 forms GET to filter data, when I submit the first form I have this url
test.com?form1_filter['year']=2022
It works, but now if I want to submit the other form I would like to have
test.com?form2_filter['users']&form1_filter['year']=2022
The problem is when I submit a form, the parameters of the second form were remove
How can I keep all parameters in url ?
I tried in javascript with the event submit when it still remove my parameters.
<form id="form1" method="get">
<div>
<label for="name">Enter your name: </label>
<input type="text" name="name" id="name" required>
</div>
<div>
<label for="email">Enter your email: </label>
<input type="email" name="email" id="email" required>
</div>
<div>
<input type="submit" value="Filter">
</div>
</form>
<form id="form2" method="get">
<select name="users" id="user-select">
<option value="1">Dad</option>
<option value="2">Mom</option>
</select>
<div>
<input type="submit" value="Filter">
</div>
</form>
It's 2 form on the same page
The form needs to have inputs for all the data you want to appear in the query string.
If you want to copy existing values without displaying a UI control for them, add them as hidden inputs.
<input type="hidden" name="form1_filter['year']" value="2022">
When you have two form on page that was loaded with URL query string, the newly sent form replaces all the parameters.
The solution is simple: Add hidden fields to the form dynamically (using server-side code) that will add the parameters back to the url.
<input type=hidden name=field-name value=field-value>
You can also do it using JS (not recommended).
Probably better solution is to redirect all requests to other URL that does not use the query string parameters. When query string is added to this URL, also redirect it (to URL that combines both). Example:
/foo?field1=bar
→ /foo/field1=bar
/foo/field1=bar?field2=baz
→ /foo/field1=bar,field2=baz
The only downside of this approach is that it is more complex on the server side.
Sometimes I just want to submit a "normal" form, but have the input fields in React (of styling reasons).
But the form doesn't seem to "see" the values of the input fields when submitting.
<form action="comments" method="post">
<label>
Name:
<input
className={styles.input}
defaultValue="Bob"
type="text"
ref={this.input} />
</label>
<input type="submit" value="Submit" />
</form>
Is there a way to accomplish something like the above, i.e. posting a form without having to create an onSubmit event handler that referes to every single field in the form?
Ps. I'm aware that the default React way is to include state, but that increases the boilerplate code even more.
use name tag in your input
e.g.
<input name="comment" type="text" defaultValue="Bob"/>
I am using jquery validator plugin to validate inputs
liberary url : https://jqueryvalidation.org/
i have al form where input fieds are dynamically generated and each row input names are same
<tr> <td><input type="text" class="form-control username" name="username"/></td> </tr>
when user click on add button then one more row will add
<tr>
<td><input type="text" class="form-control username" name="username"/></td>
</tr>
i have following validation
$validator = $("#myform").validate(
{
rules: {
username: {
required: true,
}
}
}
);
my problem is this code will validate only first row username not dynamically generated field name
before asking question i have researched lots of thread no use.
i ref many links but not helped me much
jQuery Validate multiple fields with the same name
jquery get all input from specific form
jquery validate plugin on dynamic form inputs not working
jQuery Validation plugin doesn't validate dynamically created form elements
jQuery - How to dynamically add a validation rule
Recently, I am reviewing client side code written by another programmer. I am surprised with code which is used for getting form object.
HTML for Login Form
<form id="frm_login" action="">
<input type="text" name="username" id="username">
<input type="password" name="pwd" id="pwd">
</form>
He has used following code to get form object
$frm = $("input[type='password']").closest("form");
But there is simple code for getting form object which I prefer:
$frm = $("#frm_login");
Is there any reason to use closest to get form object in above scenario?
I would really like to know if there is any performance issues.
The id of element is supposed to be unique. If there is single form on page then there is no need to relate it to its parent using closest. It would have more sense if the form does not have id. Getting form through id seem more straight forward and fast.
If there are multiple forms and one have to get the form in which the element exists then using closest make sense. This could be understood with the following example.
Live Demo
Html
<form id="frm_login1" action="">
<input type="text" name="username" id="username1" />
<input type="password" name="pwd" id="pwd1">
<table>
<tr>
<td>
<input type="text" class="myInputClass" />
</td>
</tr>
</table>
</form>
<form id="frm_login2" action="">
<input type="text" name="username" id="username2">
<input type="password" name="pwd" id="pwd2">
<table>
<tr>
<td>
<input type="text" class="myInputClass" />
</td>
</tr>
</table>
</form>
Javascript
$("input[type='password']").closest("form").each(function(){
alert($(this).find('.myInputClass').val());
});
If there is single form on page then there is no need to relate it to its parent using closest. It would have more sense if the form does not have id. Getting form through id seem more straight forward and fast.
But The Closest() method is very cool and very useful, especially when you start to deal with event delegation in which events are trapped at a higher level in the node tree than are the elements that triggered the event.
the closest() method searches through these elements and their ancestors in the DOM tree and constructs a new jQuery object from the matching elements.
as others said, if you have id, no need to use closest to get parent form. and using id is faster.
HOWEVER, in some cases you need to use closest to get form, for example, if you write a universal function for validating every password input in every form, in this case you don't like to get forms by ids and search for its childes passwordfields to prevent auto submitting, so i guess the guy who wrote the code, is doing this(a function which validates passwords before submit)
$("input[type='password']").each(function(){
$frm = .closest("form");
$frm.submit(function(event){
if( not valid password){
......
return false;
}
});
});
I current have a login box with the text ID and PASSWORD displayed inside the textbox. When a user clicks on it, it disappears and allows the user to type in their password. However, I set textmode of the Password text box to "PASSWORD" and it seems to not be working for the password box anymore. Anyone have any clues?
HTML
<input name="Login1$UserName" type="text" value="NUID" id="Login1_UserName" class="txtbox" onfocus="if(this.value==this.defaultValue) {this.value='';$(this).css('color','black');}" onblur="if(this.value=='') {this.value=this.defaultValue;$(this).css('color','rgb(173,180,195)');}" style="width:240px;" />
<span id="Login1_UserNameRequired" title="User Name is required." style="color:#DA6426;visibility:hidden;">*</span>
</td>
</tr>
<tr>
<td>
<input name="Login1$Password" type="password" id="Login1_Password" style="width:240px;" />
<span id="Login1_PasswordRequired" title="Password is required." style="color:#DA6426;visibility:hidden;">*</span>
</td>
</tr>
<tr>
<td align="center" style="color:#DA6426;">
</td>
</tr>
<tr>
<td align="right">
<input type="submit" name="Login1$LoginButton" value="Log In" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("Login1$LoginButton", "", true, "Login1", "", false, false))" id="Login1_LoginButton" style="font-family:Arial;height:22px;" />
This can be done using the onfocus and onblur events in javascript and changing the type attribute of the input element. I have, however, run into issues on some browsers not changing the field back to a password input. Here's an article that does it with asp.net controls complete with validators.
http://planetofcoders.com/watermark-property-password-textbox-web-page/
Not very familiar with asp, but with javascript you cannot change the type of an input (for security reasons); if you want the effect of having visible text in the password input, you have to physically hide the password and display another input that swaps onfocus.
EDIT:
Here is a link to the password swapping function I created a while back that is part of my js library. For anyone else looking I realize that it does not use jQuery, but I created before I used jQuery and haven't had time or reason to update it.
http://jsfiddle.net/thundercracker/DXLe3/1/
EDIT:
I am pretty sure it is completely self contained. Just need to call it on window.onload with the IDs of the two inputs.
Also need the eventListener function at the bottom with it as well.