jQuery validation plugin checkbox validation - jquery-validate

I need to validate the form. I am using jQuery validation plugin but I cannot seem to get this working.
<form id="form1" name="form1" action=<?=$_SERVER['PHP_SELF'];?> method="POST">
<div>
<h3>Cardio-Pulmonary System</h3>
<div style="border: medium none;display: inline;padding: 0;text-align:left">
<h4>1. Do you have, or have you had, or do you take medications for?</h4>
<label><input class="checkbox" type="checkbox" value="none" name="q1[]" />no / or none of the below</label>
<p><input class="checkbox" type="checkbox" value="q1-1" name="q1[]" />heart disease (please specify)
<input class="checkbox" type="text" id="text" name="q1-1" value="" /></p>
<p><input class="checkbox" type="checkbox" value="high blood pressure" name="q1[]" />high blood pressure</p>
<p><input class="checkbox" type="checkbox" value="high cholesterol" name="q1[]" />high cholesterol</p>
<p><input class="checkbox" type="checkbox" value="diabetes" name="q1[]" />diabetes</p>
<p><input class="checkbox" type="checkbox" value="q1-2" name="q1[]" />lung disorder (eg asthma, emphysema)
<input class="checkbox" type="text" id="text" name="q1-2" value="" /></p>
<p><input class="checkbox" type="checkbox" value="other cardiac problem" name="q1[]" />other cardiac problem (include pacemaker)</p>
<h4>2. Do you have a family history of?</h4>
<p><input type="checkbox" value="none" name="q2[]" />no / or none of the below</p>
<p><input type="checkbox" value="heart murmur" name="q2[]" />heart murmur</p>
<p><input type="checkbox" value="valve defect" name="q2[]" />valve defect</p>
<p><input type="checkbox" value="racing heart" name="q2[]" />racing heart</p>
<p><input type="checkbox" value="irregular beats" name="q2[]" />irregular beats</p>
<p><input type="checkbox" value="angina" name="q2[]" />angina</p>
<p>other<br/><input type="text" id="text" value="" name="q2[]" /></p>
<h4>3. Have you ever been told that you have heart problems? Eg</h4>
<p><input type="checkbox" value="none" name="q3[]" />no / or none of the below</p>
<p><input type="checkbox" value="heart disease" name="q3[]" />heart disease</p>
<p><input type="checkbox" value="high blood pressure" name="q3[]" />high blood pressure</p>
<p><input type="checkbox" value="high cholesterol" name="q3[]" />high cholesterol</p>
<p><input type="checkbox" value="diabetes" name="q3[]" />diabetes</p>
<p><input type="checkbox" value="stroke" name="q3[]" />stroke</p>
<h4>4. Do you have, or have you experienced?</h4>
<p><input type="checkbox" value="none" name="q4[]" />no / or none of the below</p>
<p><input type="checkbox" value="epilepsy" name="q4[]" />epilepsy</p>
<p><input type="checkbox" value="fainting" name="q4[]" />fainting</p>
<p><input type="checkbox" value="seizures" name="q4[]" />seizures</p>
<p><input type="checkbox" value="dizzy spells" name="q4[]" />dizzy spells</p>
<p><input type="checkbox" value="convulsions" name="q4[]" />convulsions</p>
<h4>5. Have you ever smoked cigarettes?</h4>
<p><input type="checkbox" value="q5-1" name="q5[]" />Yes, still do approx <input type="text" name="q5-1" style="width:20px" maxlength="3" /> a day</p>
<p><input type="checkbox" value="q5-2" name="q5[]" />Yes, but stopped <input type="text" name="q5-2" style="width:20px" maxlength="3" /> months / <input type="text" name="q5-3" style="width:20px" maxlength="3" /> years ago. </p>
<p><input type="checkbox" value="never" name="q5[]" />Never</p>
</div>
</form>
How do you validate checkboxes so that they need to select at least one for each question?
This is my form...http://test9.favstay.com/form.php

Use min and max length
<input type="checkbox" value="palin" name="upd" id="upd"/>
</p>
<p>
<label for="fox">Fox</label>
<input type="checkbox" value="fox" name="upd" id="upd" />
</p>
<p>
<label for="left">Left</label>
<input type="checkbox" value="left" name="upd" id="upd" />
</p>
Validate
$("#upd").rules("add", {
required: true,
minlength: 1,
maxlength: 1,
messages: {
required: "Please pick a category",
minlength: jQuery.format("Please, Check at least one box"),
maxlength: jQuery.format("Please, You checked too many boxes"),
}
});
Add an ID for each checkbox(q4, q5 etc), Substitute your q3, q4 etc where I have #upd. Just adapt this to your needs.

You can use jquery validation plugin to validate an HTML form, and to validate the checkboxes, you can add "custom selectors" to the validate options. Check out the example here

Related

How do I retrieve answers of the multichoice radio button in laravel?

I am developing a multi choice questionaire. I want to get the answered question of the student. How do I go about it?
My Code
<div class="car card-body" style="border: #d3d3d3 1px solid; padding: 2rem">
1. Don't do tath <br />
<div style="padding-top: 1rem;">
<input type="hidden" name="question_id" value=2TpZL1kJjUj7XNysyqSk">
<input type="radio" name="option[1]" id="" style="display:inline"
value="a">
1. Computer is an electronic device
<br />
<input type="hidden" name="question_id" value="2TpZL1kJjUj7XNysyqSk">
<input type="radio" name="option[1]" id="" style="display:inline"
value="b">Computer is human
<br />
<input type="hidden" name="question_id" value="2TpZL1kJjUj7XNysyqSk">
<input type="radio" name="option[1]" id="" style="display:inline"
value="c">in hime i came
<br />
</div>
</div>
<br />
<div class="car card-body" style="border: #d3d3d3 1px solid; padding: 2rem">
2. What is Web Development <br />
<div style="padding-top: 1rem;">
<input type="hidden" name="question_id" value="8qbpQJ2ob4RvlcEJzszY">
<input type="radio" name="option[2]" id="" style="display:inline" value="a">development involved database management
<br />
<input type="hidden" name="question_id" value="8qbpQJ2ob4RvlcEJzszY">
<input type="radio" name="option[2]" id="" style="display:inline"
value="b">
web development involves the design of the law
<br />
<input type="hidden" name="question_id" value="8qbpQJ2ob4RvlcEJzszY">
<input type="radio" name="option[2]" id="" style="display:inline"
value="c">Web store is the absolute beginer
<br />
</div>
</div>
<div class="form-group mt-3">
<button type="submit" class="btn btn-primary btn-block">Submit</button>
</div>
Controller
public function submitExam(Request $request){
$myOption = $request->get('option');
$optioncount = count($myOption);
for($i=1; $i<$optioncount + 1; $i++){
echo $request->get("question_id");
echo $myOption[$i]. "<br />";
$option = Options::where('question_id', $question)->value('answer');
if($myOption[$i] == $option){
echo "Good";
}
}
}
I want to select from option where question id is the same and compare it the value of the selected radio button but I only get the question id of the first question. Can anyone help me? Thanks
I have finally solved it.
<div class="car card-body" style="border: #d3d3d3 1px solid; padding: 2rem">
<div style="padding-top: 1rem;">
<input type="hidden" name="question_id" value=2TpZL1kJjUj7XNysyqSk">
<input type="radio" name="option[1]" id="" style="display:inline" value="a">
1. Computer is an electronic device
<br />
<input type="hidden" name="question_id" value="2TpZL1kJjUj7XNysyqSk">
a. <input type="radio" name="option[1]" id="" style="display:inline" value="b">Computer is human
<br />
<input type="hidden" name="question_id" value="2TpZL1kJjUj7XNysyqSk">
<br />
b. <input type="radio" name="option[1]" id="" style="display:inline" value="c">computer is
</div>
</div>
Controller
$score = 0;
foreach ($request->input('question_id', []) as $key => $question) {
$answer = $request->input('option.'.$question);
$correctAnswer = Questions::where('question_id', $question)->value('answer');
if ($correctAnswer == $answer) {
$score++;
}
}
source
https://github.com/imran1234567/Online-Examination-System/blob/master/resources/views/tests/create.blade.php
https://github.com/imran1234567/Online-Examination-System/blob/master/app/Http/Controllers/TestsController.php

Create a table together with nested objects (columns)

In my Spring MVC application I am trying to build a complex form, where a table and the tables columns can be created at once.
When I submit my form, the table is created with all attributes, but it has not columns. Whats wrong with the nested objects?
This is my view:
<form id="form2" class="form-horizontal" action="/Weasy/virtualtable/insert" method="post">
<input type="hidden" id="isVirtual" name="isVirtual" value="true"/>
<input type="hidden" id="query" name="query" value="select * from aktie"/>
<input type="hidden" id="schema" name="schema" value="40"/>
<div class="form-group">
<div class="row">
<label class="col-sm-2 control-label" for="name"><i>Column No</i></label>
<label class="col-sm-2 control-label" for="name"><i>Column Name</i></label>
<label class="col-sm-2 control-label" for="name"><i>Database Type</i></label>
</div>
<div class="row">
<label class="col-sm-2 control-label" for="name"><i>0</i></label>
<label class="col-sm-2 control-label" for="name"><i>ID</i></label>
<div class="col-sm-5">
<input type="hidden" class="form-control" name="obj.columns[0].name" value="ID" placeholder="specify name">
<input type="text" class="form-control" name="obj.columns[0].datatype" value="INTEGER , Size: 11" placeholder="specify datatype">
</div>
</div>
<div class="row">
<label class="col-sm-2 control-label" for="name"><i>1</i></label>
<label class="col-sm-2 control-label" for="name"><i>BESCHREIBUNG</i></label>
<div class="col-sm-5">
<input type="hidden" class="form-control" name="obj.columns[1].name" value="BESCHREIBUNG" placeholder="specify name">
<input type="text" class="form-control" name="obj.columns[1].datatype" value="VARCHAR , Size: 255" placeholder="specify datatype">
</div>
</div>
<div class="row">
<label class="col-sm-2 control-label" for="name"><i>2</i></label>
<label class="col-sm-2 control-label" for="name"><i>ISIN</i></label>
<div class="col-sm-5">
<input type="hidden" class="form-control" name="obj.columns[2].name" value="ISIN" placeholder="specify name">
<input type="text" class="form-control" name="obj.columns[2].datatype" value="VARCHAR , Size: 255" placeholder="specify datatype">
</div>
</div>
<div class="row">
<label class="col-sm-2 control-label" for="name"><i>3</i></label>
<label class="col-sm-2 control-label" for="name"><i>WKN</i></label>
<div class="col-sm-5">
<input type="hidden" class="form-control" name="obj.columns[3].name" value="WKN" placeholder="specify name">
<input type="text" class="form-control" name="obj.columns[3].datatype" value="VARCHAR , Size: 255" placeholder="specify datatype">
</div>
</div>
<div class="row">
<label class="col-sm-2 control-label" for="name"><i>4</i></label>
<label class="col-sm-2 control-label" for="name"><i>NAME</i></label>
<div class="col-sm-5">
<input type="hidden" class="form-control" name="obj.columns[4].name" value="NAME" placeholder="specify name">
<input type="text" class="form-control" name="obj.columns[4].datatype" value="VARCHAR , Size: 255" placeholder="specify datatype">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="name"><i>Source Table</i></label>
<div class="col-sm-5">
<input type="text" class="form-control" id="name" name="name"
value="" placeholder="Virtual Table Name" required>
</div>
</div>
<div class="row">
<div class="col-sm-2"></div>
<div class="col-sm-2">
<input id="execQry" class="btn btn-block btn-primary btn-default"
type="submit" value="Save"
>
</div>
</div>
</div>
</form>
And this is the corresponding method of my controller. When I debug it, I see the table, but it has no columns.
#RequestMapping("insert")
public ModelAndView insert(#ModelAttribute SrcTable obj) {
return update(obj);
}
In your HTML you are trying to simulate a table with bootstrap, if you take a look at http://getbootstrap.com/css/#forms in form-horizontal section it can give you a more table-like structure, but in this case i recommend a table structure inside your form.
Example:
<input type="hidden" id="isVirtual" name="isVirtual" value="true"/>
<input type="hidden" id="query" name="query" value="select * from aktie"/>
<input type="hidden" id="schema" name="schema" value="40"/>
<table class="table">
<thead>
<tr>
<th><i>Column No</i></th>
<th><i>Column Name</i></th>
<th><i>Database Type</i></th>
</tr>
</thead>
<tbody>
<tr>
<td><i>0</i></td>
<td><i>ID</i></td>
<td>
<input type="hidden" class="form-control" name="obj.columns[0].name" value="ID" placeholder="specify name">
<input type="text" class="form-control" name="obj.columns[0].datatype" value="INTEGER , Size: 11" placeholder="specify datatype">
</td>
</tr>
<tr>
<td><i>1</i></td>
<td><i>BESCHREIBUNG</i></td>
<td>
<input type="hidden" class="form-control" name="obj.columns[1].name" value="BESCHREIBUNG" placeholder="specify name">
<input type="text" class="form-control" name="obj.columns[1].datatype" value="VARCHAR , Size: 255" placeholder="specify datatype">
</td>
</tr>
<tr>
<td><i>2</i></td>
<td><i>ISIN</i></td>
<td>
<input type="hidden" class="form-control" name="obj.columns[2].name" value="ISIN" placeholder="specify name">
<input type="text" class="form-control" name="obj.columns[2].datatype" value="VARCHAR , Size: 255" placeholder="specify datatype">
</td>
</tr>
<tr>
<td><i>3</i></td>
<td><i>WKN</i></td>
<td>
<input type="hidden" class="form-control" name="obj.columns[3].name" value="WKN" placeholder="specify name">
<input type="text" class="form-control" name="obj.columns[3].datatype" value="VARCHAR , Size: 255" placeholder="specify datatype">
</td>
</tr>
<tr>
<td><i>4</i></td>
<td><i>NAME</i></td>
<td>
<input type="hidden" class="form-control" name="obj.columns[4].name" value="NAME" placeholder="specify name">
<input type="text" class="form-control" name="obj.columns[4].datatype" value="VARCHAR , Size: 255" placeholder="specify datatype">
</td>
</tr>
</tbody>
</table>
<input id="execQry" class="btn btn-block btn-primary btn-default"
type="submit" value="Save"
>
</form>
While looking this over after a day pause, I found my error.
instead of
<input type="hidden" class="form-control" name="obj.columns[4].name" value="NAME" placeholder="specify name">
I had to use
<input type="hidden" class="form-control" name="columns[4].name" value="NAME" placeholder="specify name">

Validating Arrays of radio buttons in laravel

I am using Laravel 5.1 and homestead.
My issue is when validation fails, the radio buttons do not repopulate with data from the original user's input.
My validation rules from PostRequest.php
public function rules()
{
//validating input text field --> this one works
$rules = ['owner' => 'required|max:15',];
//validating array of input text fields --> this too works
foreach($this->request->get('item') as $a => $z)
{
$rules['item.'.$a] = 'required';
}
//validating array of radio buttons --> does not return with data
foreach($this->request->get('radio') as $b => $y)
{
$rules['radio.'.$b] = 'required';
}
return $rules;
}
A segment of my view(blade.php)
<div class="row">
<div class="tcell col-xs-6">
<label for="item[0]" class="sr-only"></label>
<input class="form-control" id="item[0]" name="item[0]" type="text" placeholder="enter item" value="{ { old('item.0') } }"/>
</div>
<div class="tcell col-xs-6">
<div class="radio">
<input type="radio" id="s15" name="radio[0]" value="5" /><label for="s15" title="5">5</label>
<input type="radio" id="s14" name="radio[0]" value="4" /><label for="s14" title="4">4</label>
<input type="radio" id="s13" name="radio[0]" value="3" /><label for="s13" title="3">3</label>
<input type="radio" id="s12" name="radio[0]" value="2" /><label for="s12" title="2">2</label>
<input type="radio" id="s11" name="radio[0]" value="1" /><label for="s11" title="1">1</label>
</div>
</div>
</div>
...
<div class="tcell col-xs-6">
<div class="radio">
<input type="radio" id="s20" name="radio[1]" value="5" /><label for="s20" title="5">5</label>
<input type="radio" id="s19" name="radio[1]" value="4" /><label for="s19" title="4">4</label>
<input type="radio" id="s18" name="radio[1]" value="3" /><label for="s18" title="3">3</label>
<input type="radio" id="s17" name="radio[1]" value="2" /><label for="s17" title="2">2</label>
<input type="radio" id="s16" name="radio[1]" value="1" /><label for="s16" title="1">1</label>
</div>
</div>
The old() function worked for both input(text) and array of input(text). but I do not know how to apply it with radio buttons.
Thanks
Here's the solution
<input type="radio" id="s15" name="radio[1]" value="5" { { old('radio.1')=="5" ? 'checked='.'"'.'checked'.'"' : '' } } /><label for="s15" title="5">5</label>
<input type="radio" id="s14" name="radio[1]" value="5" { { old('radio.1')=="4" ? 'checked='.'"'.'checked'.'"' : '' } } /><label for="s14" title="4">4</label>
...
This will only help redirect back with the inputed data, however, validation will still fail if nothing is selected since nothing gets submitted. The fix is to use for loop instead of foreach loop. You must get the count of the radio buttons to iterate.
try to amend as following
blade template:
<div class="radio">
<input type="radio" id="s15" name="radio" value="5" /><label for="s15" title="5">5</label>
<input type="radio" id="s14" name="radio" value="4" /><label for="s14" title="4">4</label>
<input type="radio" id="s13" name="radio" value="3" /><label for="s13" title="3">3</label>
<input type="radio" id="s12" name="radio" value="2" /><label for="s12" title="2">2</label>
<input type="radio" id="s11" name="radio" value="1" /><label for="s11" title="1">1</label>
</div>
Form request
public function rules()
{
//validating input text field --> this one works
$rules = ['owner' => 'required|max:15', 'radio' => 'required'];
//validating array of input text fields --> this too works
foreach($this->request->get('item') as $a => $z)
{
$rules['item.'.$a] = 'required';
}
return $rules;
}

Uncaught TypeError : object is not a function error come when i try to document.index.submit();

<form role="form" class="register-form cf-style-1" name="index" action="#" method="post">
<div class="field-row">
<label>First Name: *</label>
<input type="text" name="firstName" class="le-input">
<label>Last Name: *</label>
<input type="text" name="lastName" class="le-input">
<label>Email: *</label>
<input type="text" name="email" class="le-input">
<input type="hidden" name="dbAction">
<label>Mobile Number: *</label>
<input type="text" name="mobileNumber" class="le-input">
<label>Create Password: *</label>
<input type="password" name="createPassword" class="le-input">
<label>Confirm Password: *</label>
<input type="password" name="confirmPassword" class="le-input">
</div><!-- /.field-row -->
<div class="buttons-holder">
<button type="button" name="submit" onclick="validatePageData();" class="le-button huge">Sign Up</button>
</div><!-- /.buttons-holder -->
</form>
<script>
function validatePageData() {document.index.submit();
}`
document.forms[name ="index"].submit() should work.

CasperJs, how to fill a form that only have a class, not a name and not an id?

I want to fill this form, but i dont know how to do it since it only have a classname.
All the examples i saw have an id or a name, to fill the form and submit it, please help.
<form class="header_form" method="post" action="">
<div class="lgn-items">
<div class="login_item">
<label>Email</label>
<input type="text" name="email" tabindex="1" class="inputtext" id="email" />
</div>
<div class="login_item" >
<label>Password</label>
<input type="password" name="password" tabindex="2" class="inputtext" id="pass" />
</div>
<div class="lgn-add">
Registration <span>|</span>
Forgot your password ?
<div class="rembo">
<input type="checkbox" name="remember" value="1" /> Remember me
</div>
</div>
</div>
<div class="login_item lgn-btn" >
<input type="submit" name="login_button" value="Login" tabindex="3" class="login" />
</div>
</form>
You can access to your form using any selector. In your case you to it like this.
casper.then(function () {
casper.fill('form.header_form', {
/** Your parameters here **/
}, true);
});

Resources