I have search lot of about this but haven't found any solution. I want to validate multiple array named file inputs and dropdowns in JQuery validate.
<td> <input type="text" class="times" name="times[]" /> </td>
</tr>
<tr>
<td> <input type="text" class="times" name="times[]" /> </td>
</tr>
<tr>
<td> <input type="text" class="times" name="times[]" /> </td>
</tr>
I have added JQuery Validate Code like this:
$("#formname").validate(
{
rules:{
times:{required:true, digits:true}
}}
);
But its only validating first input and showing error message there only whether 2nd or 3rd input field entered or not.
I don't want to change this "times[]" name because functionality is depending on this. Only I want validation using JQuery validate.
Is there any trick available for this?
Any help would be appreciated.
Thanks
The plugin doesn't handle fields with the same name well. Here's how I solved it in my application.
I gave all the repetitive fields distinct names, and put the validation method names in the class.
<td> <input type="text" class="times required digits" name="times[0]" /> </td>
</tr>
<tr>
<td> <input type="text" class="times required digits" name="times[1]" /> </td>
</tr>
<tr>
<td> <input type="text" class="times required digits" name="times[2]" /> </td>
</tr>
You can remove the indexes before submitting with code like this:
$("#formname").validate({
...
submitHandler: function(form) {
$(form).find(":input[name*='[']").each(function() {
this.name = this.name.replace(/\[\d+\]/, '[]');
}
form.submit();
}
});
Related
Good evening everybody!
I'd like to hide a profile field if the user meta is blank.
For example, in the image, I'd like to hide the billing_ateco row because billing_ateco field is empty.
I have no idea where to start, if you have the solution or suggest me one similar thread (I didn't find anything in the similar questions section when I posted this) It would be a great help, thanks in advance!
If by user meta you mean user input, one approach would be to find all input elements, check if their value is empty and then hide their parent tr element.
// Find all <input> elements:
document.querySelectorAll("input").forEach( input =>{
// Check to see if the value is empty:
if ( input.value.trim() === "" ){
// Find the closest <tr> parent of the input and
// hide it:
input.closest("tr").style.display = "none";
}
});
<table>
<tr>
<td>
<label for="a">Label A</label>
</td>
<td>
<input id="a" />
</td>
</tr>
<tr>
<td>
<label for="b">Label B</label>
</td>
<td>
<input id="b" />
</td>
</tr>
<tr>
<td>
<label for="c">Label C</label>
</td>
<td>
<input id="c" value="Value" />
</td>
</tr>
</table>
i have a html form submitting to my spring java controller. i have a small problem here.
<table id="example1" class="table table-bordered table-striped">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
<th>Sex</th>
<th>District</th>
<th>VDC/MUNICIPAL</th>
<th>Ward No.</th>
<th>Camp Visited?</th>
<th>Consent</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr th:each="persons : ${part}">
<form method="post" th:action="#{/addParticipant}" enctype="multipart/form-data">
<input type="hidden" th:value="${persons.id}" name="id">
<td>
<span class="hidden" th:text="${persons.name}"></span>
<input type="text" name="name" th:value="${persons.name}">
</td>
<td>
<span class="hidden" th:text="${persons.lastName}"></span>
<input name="lastName" type="text" th:value="${persons.lastName}">
</td >
<td>
<span class="hidden" th:text="${persons.age}"></span>
<input name="age" type="text" th:value="${persons.age}">
</td>
<td>
<span class="hidden" th:text="${persons.sex}"></span>
<input name="sex" type="text" th:value="${persons.sex}">
</td>
<td>
<span class="hidden" th:text="${persons.district}"></span>
<input name="district" type="text" th:value="${persons.district}">
</td>
<td>
<span class="hidden" th:text="${persons.vdcMun}"></span>
<input name="vdcMun" type="text" th:value="${persons.vdcMun}">
</td>
<td>
<span class="hidden" th:text="${persons.wardNo}"></span>
<input name="wardNo" type="text" th:value="${persons.wardNo}">
</td>
<td>
<div class="checkbox">
<input type='hidden' value='no' name='attendStatus' id="attendStatusHidden">
<input type="checkbox" value="yes" name="attendStatus" id="attendStatus">
</div>
</td>
<td>
<div class="form-control">
<input type="hidden" name="file" value="null">
<input id="file" type="file" name="file" accept="image/*">
</div>
</td>
<td>
<button type="submit" class="btn btn-success" id="submitButton">Submit</button>
</td>
</form>
</tr>
</tbody>
</table>
so what i am trying to do is whenever my checkbox is checked it should send the value yes else no.
i tried to put the two input fields with one being hidden. but whenever i submit the form it posts both yes and no on my table.
i tried javascript like this.
window.onload = function(){
if(document.getElementById("attendStatus").checked) {
document.getElementById('attendStatusHidden').disabled = true;
}
};
i am trying to disable hidden field whenever i check the checkbox but still it posts both yes,no on my table.
how can i solve this with javascript or HTML itself, if there's any?
You can easily manage like that.
<input type='hidden' value='false' name='attendStatus'>
<input type="checkbox" name="attendStatus" value="true">
if the checkbox is not checked, the value send to the form will be false.
If the checkbox is checked, the value send to the form will be true.
you should have the same 'name' property for both of them, and the order is also important, the hidden input come first and after the checkbox.
I was able to solve this issue by adding a hidden item whose field name starts with an exclamation mark (!).
<input type="checkbox" name="attendStatus" value="true" />
<input type="hidden" name="!attendStatus" value="false" />
This is described in Spring's WebDataBinder API as DEFAULT_FIELD_DEFAULT_PREFIX.
You can use a separate input name for your hidden field:
<input type='hidden' value='no' name='_attendStatus' id="attendStatusHidden">
Then if your parameter attendStatus isn't present you can use the _attendStatus value.
This convention is used in Spring for example.
See this answer for more information about it.
another option to handle this on the client side like this:
<input type='hidden' value='false' name='attendStatus' id="attendStatusHidden">
<input type="checkbox" onchange="document.getElementById('attendStatusHidden').value = this.checked">
I am creating 2 dynamic controls array.
<input type=text name=quantity[]>
<input type=text name=price[]>
I want to multiply these two inputs and show the result accordingly. I want to do it on frontend using javascript or jQuery.
What will be the best possible way of doing it?
EDIT
#Zeus
As I mentioned in the question it is an array of controls so the code will go like this
<input type="text" name="quantity[]"> <input type="text" name="price[]">
<input type="text" name="quantity[]"> <input type="text" name="price[]">
<input type="text" name="quantity[]"> <input type="text" name="price[]">
Now I will enter quantity in first textfield and price in the second one. For each row I need to multiply these fields and show the result next to them.
Hope it explains the question more.
You can do it like this :
$("button").click(function() {
$("#calc tr").each(function(i) {
var result = $(this).find("input[name*='quantity[]']").val() * $(this).find("input[name*='price[]']").val();
$(this).children("td:nth-child(3)").html(result);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<table id="calc">
<tr>
<th>Quantity</th>
<th>Price</th>
<th>Result</th>
</tr>
<tr>
<td>
<input type="text" name="quantity[]">
</td>
<td>
<input type="text" name="price[]">
</td>
<td></td>
</tr>
<tr>
<td>
<input type="text" name="quantity[]">
</td>
<td>
<input type="text" name="price[]">
</td>
<td></td>
</tr>
<tr>
<td>
<input type="text" name="quantity[]">
</td>
<td>
<input type="text" name="price[]">
</td>
<td></td>
</tr>
</table>
<button>Click me after entering values</button>
Run the code to test it.
This is just an example you will be needing to edit the code to make it work for you.
I'm trying to get unique id for each table row on my input fields and buttons. Currently all ids in my table are the same. I want to set unique id for each input field ans save button. Here is my HTML code:
<cfoutput query="qryTable" group="DateSch">
<tbody>
<tr>
<td rowspan="#StartTime#">#DateFormat(DateSch,'mm/dd/yyyy')#</td>
</tr>
<cfoutput>
<tr>
<td>#TimeFormat(StartTime,'hh:mm tt')#</td>
<td>#TimeFormat(EndTime,'hh:mm tt')#</td>
<td>
<label>
<input type="text" name="email" id="email" class="email" placeholder="example#gmail.com">
<input type="button" id="slot" name="slot" class="slot" value="Save" onClick="saveSlot('#TimeSlotID#')">
</label>
</td>
</tr>
</cfoutput>
</tbody>
</cfoutput>
As you can see from code above my input field ids are all email and my button ids are slot. How I can make them unique for each row? If anyone can help please let me know.
Add the currentRow to the ID
<cfoutput query="qryTable" group="DateSch">
<tbody>
<tr>
<td rowspan="#StartTime#">#DateFormat(DateSch,'mm/dd/yyyy')#</td>
</tr>
<cfoutput>
<tr>
<td>#TimeFormat(StartTime,'hh:mm tt')#</td>
<td>#TimeFormat(EndTime,'hh:mm tt')#</td>
<td>
<label>
<input type="text" name="email" id="email#currentRow#" class="email" placeholder="example#gmail.com">
<input type="button" id="slot#currentRow#" name="slot" class="slot" value="Save" onClick="saveSlot('#TimeSlotID#')">
</label>
</td>
</tr>
</cfoutput>
</tbody>
</cfoutput>
To dynamically add unique id to the row use uniqueId or just a counter with some specific prefix.
To make input ids unique add entity id or the row number to them.
There is another thread here:
Create GUID / UUID in JavaScript?
If you cannot find a solution there:
I got a UUID class from Erik Giberti (AF-Design). While his file is no longer available for downloading, I would be willing to provide it to.
I want to do the validation to four text box using JQuery
Coding i have done
<table align="center" id="tbl-employee">
<tr>
<td>
<label>Insert Employee Details</label>
</td>
</tr>
<tr>
<td>
<label id="lbl-name">Name</label>
</td>
<td>:</td>
<td>
<input type="text" id="txt-name" />
</td>
</tr>
<tr>
<td>
<label id="lbl-salary">Salary</label>
</td>
<td>:</td>
<td><input type="text" id="txt-salary" /></td>
</tr>
<tr>
<td>
<label id="lbl-deptid">DeptId</label>
</td>
<td>:</td>
<td><select id="ddl-deptid">
<option value="0">-SelectOne-</option>
<option value="1">SoftWare</option>
<option value="2">CA</option>
<option value="3">Professor</option>
</select>
</td>
</tr>
<tr>
<td></td>
<td></td>
<td><input type="button" id="btn-insert" value="Insert" /></td>
</tr>
</table>
}
JavaScript code
$(function () {
$("#btn-insert").click(function () {
$("#tbl-employee").validate({
rules: {
Name: { required: true, minlenth: 50 },
Salary:{required:true,minlength:9},
DeptId:"required"
},
message: {
Name:{required:"Please Enter Name",minlength:"Your Name must lessthan 50 characters" }
},
submit Handler: function (table) {
table.submit();
}
});
})
})
Will anyone check my program,If i am not giving any text to the input text box ,while submitting it should display the error message.
.validate() function of jquery validation is applied for form id not for table id.
You are given .validate() to table id
The validate plugin requires ID of the form to be validated unlike the id of the table you are using now tbl-employee. Wrap your HTML inside a form and the id of this form to validate.
$("#id_of_your_form").validate({..
Also, you are not having required attribute for the input textbox. Add it to the desired textboxes and the validations will work.
Eg. <input type="text" id="txt-name" required/>