I have 3 required fields on my page and 2 of them are hidden. The hidden fields values are filled by jQuery based off the selection of dropdown lists. If I just leave everything blank so that none of the fields are every filled in and hit the submit button the #Html.ValidationSummery() only lists an error for the 1 visible field. How can I get it to show errors when the hidden fields don't have a value as well?
The code for my hidden fields:
<li>
<label for="SelectedProjects">Selected Projects:</label>
<select size="1" id="SelectedProjects" name="SelectedProjects" multiple="multiple"></select> <button class="removeButton" data-codetype="Project" type="button">-</button>
#Html.EditorFor(m => m.SelectedProjectCodes)
</li>
<li>
<label for="SelectedTasks">Selected Tasks:</label>
<select size="1" multiple="multiple" id="SelectedTasks" name="SelectedTasks"></select> <button class="removeButton" data-codetype="Task" type="button">-</button>
#Html.EditorFor(m => m.SelectedTaskCodes)
</li>
The HTML rendered:
<li>
<label for="SelectedProjects">Selected Projects:</label>
<select size="1" id="SelectedProjects" name="SelectedProjects" multiple="multiple"></select> <button class="removeButton" data-codetype="Project" type="button">-</button>
<input data-val="true" data-val-required="The SelectedProjectCodes field is required." id="SelectedProjectCodes" name="SelectedProjectCodes" type="hidden" value="" />
</li>
<li>
<label for="SelectedTasks">Selected Tasks:</label>
<select size="1" multiple="multiple" id="SelectedTasks" name="SelectedTasks"></select> <button class="removeButton" data-codetype="Task" type="button">-</button>
<input data-val="true" data-val-required="The SelectedTaskCodes field is required." id="SelectedTaskCodes" name="SelectedTaskCodes" type="hidden" value="" />
</li>
The properties in the ViewModel backing it:
[HiddenInput(DisplayValue = false), Required]
public string SelectedProjectCodes { get; set; }
[HiddenInput(DisplayValue = false), Required]
public string SelectedTaskCodes { get; set; }
By default jQuery validation (which is what MVC uses) ignores hidden fields. You can adjust this by changing the default setting when the page loads. One way might be to add an class to the hidden fields to force them to be validated.
<li>
<label for="SelectedProjects">Selected Projects:</label>
<select size="1" id="SelectedProjects" name="SelectedProjects" multiple="multiple"></select> <button class="removeButton" data-codetype="Project" type="button">-</button>
<input class="force-validation" data-val="true" data-val-required="The SelectedProjectCodes field is required." id="SelectedProjectCodes" name="SelectedProjectCodes" type="hidden" value=""/>
</li>
the the javacript to change the defaults would look like this
jQuery.validator.setDefaults({
ignore: ":hidden:not(.force-validation)"
});
Related
<form (ngSubmit)="submit(feedbackForm)" #feedbackForm="ngForm">
<div class="form-group" *ngFor="let ques of questions;">
<label for="comment">{{ques.question}}</label>
<textarea
class="form-control"
rows="5"
id = "comment"
name="feedbackAnswers"
ngModel
required>
</textarea>
</div>
<button
type="submit"
class="btn btn-info"
*ngIf=!sendingEmail
[disabled]="!feedbackForm.valid">Save</button>
</form>
on ,
console.log(feedbackForm),
the 'values' property only shows first input. How can I get an array having name i.e 'feedbackAnswers' and having value what use did input.
You have to make the name attribute unique so that the template driven form will create a control for each input in the loop... try the following change. [name]="ques.question"
<form (ngSubmit)="submit(feedbackForm)" #feedbackForm="ngForm">
<div class="form-group" *ngFor="let ques of questions;">
<label for="comment">{{ques.question}}</label>
<textarea
class="form-control"
rows="5"
id = "comment"
[name]="ques.question"
ngModel
required>
</textarea>
</div>
<button
type="submit"
class="btn btn-info"
*ngIf=!sendingEmail
[disabled]="!feedbackForm.valid">Save</button>
</form>
I'm trying to make a modal reveal for every Edit button just when i clicked onto the Edit button it doesnt open i did as mentionned onto the documentation for Foundation 6 .Here is my code.Please any help.
<ul class="button-group">
i give to every reveal modal an id based on the field id with that i would have
different ids and linked every Edit button with its modal
<li>
<a class="button tiny" data-open="editModal<?php echo $contact->id ;?>"
data-contact-id="<?php echo $contact->id;?>">Edit</a>
<!-- the modal edit start here -->
<div class="reveal large editmodal" id="editModal<?php echo $contact->id ;?>"
data-cid="<?php echo $contact->id ;?>" data-reveal>
<div class="grid-x grid-margin-x">
<div class="cell large-12"><h1>Edit Contact</h1></div>
</div>
form of the edit modal
<form action="#" id="editadress" method="post">
<div class="grid-x grid-margin-x">
<div class="cell large-6">
first name input field
<label>First Name
<input type="text" name="first_name" placeholder="Enter Your First Name"
value="<?php echo $contact->first_name; ?>">
</label>
</div>
<div class="cell large-6">
last name input field
<label>Last Name
<input type="text" name="last_name" value="<?php echo $contact->last_name; ?>"
placeholder="Enter Your Last Name">
</label>
</div>
</div>
submit button of the form
<div class="grid-x grid-margin-x">
<div class="cell large-12">
<input class="button big abutton right small" name="submit" type="submit" value="Submit"/>
</div>
</div>
</form>
close button of the modal
<button class="close-button" data-close aria-label="Close modal" type="button">
<span aria-hidden="true">×</span>
</button>
</div>
<!--The modal edit ends here-->
</li>
<li>
<a class="button alert tiny">Delete</a>
</li>
</ul>
I am trying to build an app that lets users find other users with a specific combination of skills. I ask the users to select which skills they are looking for via checkboxes but I'm not sure how to request for the status of that checkbox in my function.
My function currently is:
UserInfo.find()
.where('skill1').equals('')
.where('skill2').equals('')
.where('skill3').equals('')
.limit(10)
.then(function(doc) {
res.render('index', {items: doc});
});
It works properly if I set the equals('') to true or false but I'm not sure how to set it dynamically. My HTML code for the checkboxes is:
<form action="/getskills" method="get">
<div class="input">
<label for="skill1">Skill1</label>
<input type="checkbox" id="skill1" name="skill1" value="skill1"/>
</div>
<div class="input">
<label for="skill2">Skill2</label>
<input type="checkbox" id="skill2" name="skill2" value="skill2"/>
</div>
<div class="input">
<label for="skill3">Skill3</label>
<input type="checkbox" id="skill3" name="skill3" value="skill3"/>
</div>
FIND SKILL
</form>
How can I create and integrate a function to check the value of the checkbox and set the value of the required skill to either true or false?
Thanks in advance for your help.
The problem is that you are using an <a> element to perform the request to the server instead of <input type="submit">. Without a submit button, the elements on your form will not be submitted with the request. Modify your html to this
<form action="/getskills" method="get">
<div class="input">
<label for="skill1">Skill1</label>
<input type="checkbox" id="skill1" name="skill1" value="skill1" />
</div>
<div class="input">
<label for="skill2">Skill2</label>
<input type="checkbox" id="skill2" name="skill2" value="skill2" />
</div>
<div class="input">
<label for="skill3">Skill3</label>
<input type="checkbox" id="skill3" name="skill3" value="skill3" />
</div>
<input type="submit" value="FIND SKILL" />
</form>
then in your Node.js code (I assume you are using express), you can get the checkbox values as query parameters as follows:
//I'm assuming the req parameter is passed in to the express get() method
UserInfo.find()
.where('skill1').equals(req.query.skill1)
.where('skill2').equals(req.query.skill2)
.where('skill3').equals(req.query.skill3)
.limit(10)
.then(function(doc) {
res.render('index', {items: doc});
});
Letters come with all the fields filled in, but when I click the email client "answer" button reply-to address is taken from the field emailFrom. Why?
&hooks=`email,redirect`
&emailTpl=`MyEmailChunk`
&emailTo=`ask#ru7lan.ru`
&emailFrom=`ask#ru7lan.ru`
&emailReplyTo=`[[+email]]`
https://docs.modx.com/extras/revo/formit/formit.hooks/formit.hooks.email
emailReplyTo - An email to set as the reply-to. If not set, will
first look for an 'email' form field. If none is found, will default
to value set in 'emailFrom'.
Check your [[+email]] placeholder - maybe he is empty.
With the comment posted here, I think that the ID of your form input is missing:
this is my input/...
<!-- Text input--> <div class="form-group">
<label class="pull-left col-md-4 control-label">E-Mail</label>
<div class="col-md-4 col-sm-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon">
<i class="glyphicon glyphicon-envelope"></i></span>
<input name="email" value="[[!+fi.email]]" placeholder="anna#mail.ru" class="form-control" type="text" >
</div> </div> </div>
Place an id="email" into the html tag and it should work.
I am trying to create filter menus that list the input values of template variables (t-v) from all children within a parent. I use EVO.
Here the setup:
Parent (1)
child (a)
t-v-1 (input value: car)
child (b)
t-v-1 (input value: house)
child (c)
t-v-1 (input value: boat)
The filter menu on front-end should show then:
"Filter menu:
t-v-1"
O car
O house
O boat
So basically the filter menu code should pull all input values from the template variables (across all parent children) into the filter-menu-box (possibly eliminating duplicate input values).
This is my basic filter-menu chunk.
<div class="btn-toolbar">
<!--Default buttons with dropdown menu-->
<div class="btn-group">
<button class="btn btn-default" type="button">T-V-1</button>
<button class="btn btn-default dropdown-toggle" data-toggle=
"dropdown" type="button"><span class="caret"></span></button>
<div class="dropdown-menu scrollable-menu" style="margin-left: 2em">
<input type="text" class="form-control" placeholder="Search values">
<div class="checkbox">
<label><input type="checkbox" value=""> Value-1</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value=""> Value-2
</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value=""> Value-3</label>
</div>
</div>
</div>
The values 1,2,3 should then list the input values from the t-v across all parent children.
Is it possible to achieve my objective in MODx EVO?
You could try the xdbfilter package for this. It is quite old but there is not much Evolution development these days. I think the linked package is the latest one.