I have implemented bootstrap form validation in my angular2 application and some of the form elements are not getting validated even after using the bootstrap form validation directive properly. When I tried inspecting the code, I found the "has-error" class is not appearing in the form fields.
Here is my form code:
<form id="emailForm"
#emailForm= "ngForm"
novalidate="novalidate"
[saBootstrapValidator]="validatorOptions">
<!-- widget content -->
<div class="widget-body">
<!--template Name -->
<fieldset>
<div class="form-group">
<div class="row">
<section class="col-sm-12 col-md-10">
<strong class="control-label">Name</strong><label class="required"></label>
<input class="form-control"
placeholder="Enter template name"
type="text"
value="{{message.name}}"
name="templateName" [(ngModel)]="composeModel.Name">
</section>
<section class="col-sm-12 col-md-2">
<label for="select2-multiple">
<strong>Category</strong></label>
<select
style="width:100%"
class="form-control select2"
name="category">
<option *ngFor = "let category of templateCategories" value="{{category.Id}}">{{category.Name}}</option>
</select>
</section>
</div>
</div>
</fieldset>
<!--Description -->
<fieldset>
<div class="form-group">
<div class="row">
<section class="col-sm-12 col-md-12 ">
<strong>Description</strong>
<textarea class="form-control" name="review" rows="2" placeholder="Enter a brief summary that decribes the puropose of this template " [(ngModel)]="composeModel.Description"></textarea>
</section>
</div>
</div>
</fieldset>
<!-- To -->
<fieldset>
<div class="form-group">
<div class="row">
<section class="col-md-12">
<strong class="control-label">To</strong><label class="required"></label>
<popover-content #multSelectContent>
<span style="color: #3276B1">Hold ctrl-key to select multiple emails<br /> Start typing to search for email</span>
</popover-content>
<a (click)="(null)"
class="fa fa-question-circle"
popoverPlacement="top"
[popoverOnHover]="true"
data-html="true"
popoverTitle="Multiple Selection"
[popover]="multSelectContent"></a>
<div class="boxed">
<select
multiple select2 style="width:100%"
data-select-search="true"
class="form-control select2-multiple"
name="emailTo">
<optgroup label="Responsible Parties">
<option value="1"> sunny.orlaf#smartadmin.com</option>
<option value="2"> rachael.hawi#smartadmin.com</option>
<option value="3"> michael.safiel#smartadmin.com</option>
</optgroup>
<optgroup label="Evaluator">
<option value="alex.jones#infowars.com"> alex.jones#infowars.com</option>
<option value="oruf.matalla#gmail.com"> oruf.matalla#gmail.com</option>
<option value="hr#smartadmin.com"> hr#smartadmin.com</option>
<option value="IT#smartadmin.com"> IT#smartadmin.com</option>
</optgroup>
<optgroup label="Informed Parties">
<option value="alex.jones#infowars.com"> alex1.jones#infowars.com</option>
<option value="oruf.matalla#gmail.com"> oruf1.matalla#gmail.com</option>
<option value="hr#smartadmin.com"> hr1#smartadmin.com</option>
<option value="IT#smartadmin.com"> IT1#smartadmin.com</option>
</optgroup>
</select>
</div>
</section>
</div>
</div>
</fieldset>
<!-- CC -->
<fieldset>
<div class="form-group">
<div class="row">
<section class="col-sm-12 col-md-6">
<label><strong>CC</strong></label>
<popover-content #multSelectContent1>
<span style="color: #3276B1">Hold ctrl-key to select multiple emails<br /> Start typing to search for email</span>
</popover-content>
<a (click)="(null)" class="fa fa-question-circle" popoverPlacement="top" [popoverOnHover]="true" data-html="true" popoverTitle="Multiple Selection" [popover]="multSelectContent1"></a>
<div class="boxed">
<select multiple select2 style="width:100%" data-select-search="true" class="select2">
<optgroup label="Responsible Parties">
<option value="sunny.orlaf#smartadmin.com">sunny.orlaf#smartadmin.com</option>
<option value="rachael.hawi#smartadmin.com">rachael.hawi#smartadmin.com</option>
<option value="michael.safiel#smartadmin.com">michael.safiel#smartadmin.com</option>
</optgroup>
<optgroup label="Evaluator">
<option value="alex.jones#infowars.com">alex.jones#infowars.com</option>
<option value="oruf.matalla#gmail.com">oruf.matalla#gmail.com</option>
<option value="hr#smartadmin.com">hr#smartadmin.com</option>
<option value="IT#smartadmin.com">IT#smartadmin.com</option>
</optgroup>
<optgroup label="Informed Parties">
<option value="alex.jones#infowars.com">alex1.jones#infowars.com</option>
<option value="oruf.matalla#gmail.com">oruf1.matalla#gmail.com</option>
<option value="hr#smartadmin.com">hr1#smartadmin.com</option>
<option value="IT#smartadmin.com">IT1#smartadmin.com</option>
</optgroup>
</select>
</div>
</section>
<!-- BCC -->
<section class="col-sm-12 col-md-6">
<label><strong>BCC</strong></label>
<popover-content #multSelectContent1>
<span style="color: #3276B1">Hold ctrl-key to select multiple emails<br /> Start typing to search for email</span>
</popover-content>
<a (click)="(null)" class="fa fa-question-circle" popoverPlacement="top" [popoverOnHover]="true" data-html="true" popoverTitle="Multiple Selection" [popover]="multSelectContent1"></a>
<div class="boxed">
<select multiple select2 style="width:100%" data-select-search="true" class="select2">
<optgroup label="Responsible Parties">
<option value="sunny.orlaf#smartadmin.com">sunny.orlaf#smartadmin.com</option>
<option value="rachael.hawi#smartadmin.com">rachael.hawi#smartadmin.com</option>
<option value="michael.safiel#smartadmin.com">michael.safiel#smartadmin.com</option>
</optgroup>
<optgroup label="Evaluator">
<option value="alex.jones#infowars.com">alex.jones#infowars.com</option>
<option value="oruf.matalla#gmail.com">oruf.matalla#gmail.com</option>
<option value="hr#smartadmin.com">hr#smartadmin.com</option>
<option value="IT#smartadmin.com">IT#smartadmin.com</option>
</optgroup>
<optgroup label="Informed Parties">
<option value="alex.jones#infowars.com">alex1.jones#infowars.com</option>
<option value="oruf.matalla#gmail.com">oruf1.matalla#gmail.com</option>
<option value="hr#smartadmin.com">hr1#smartadmin.com</option>
<option value="IT#smartadmin.com">IT1#smartadmin.com</option>
</optgroup>
</select>
</div>
</section>
</div>
</div>
</fieldset>
<!--Subject -->
<fieldset>
<div class="form-group">
<div class="row">
<section class="col-md-12 ">
<label><strong>Subject</strong></label>
<popover-content #multSelectContent>
<span style="color: #3276B1">Hold ctrl-key to select multiple emails<br /> Start typing to search for email</span>
</popover-content>
<a (click)="(null)"
class="fa fa-question-circle"
popoverPlacement="top"
[popoverOnHover]="true"
data-html="true"
popoverTitle="Multiple Selection"
[popover]="multSelectContent"></a>
<div class="boxed">
<select
multiple select2 style="width:100%"
data-select-search="true"
class="form-control select2-multiple"
name="emailTo"
placeholder = "Email Subject">
<optgroup label="Evaluation type title">
</optgroup>
<optgroup label="Topic">
<option value="topic1">topic1</option>
<option value="topic2">topic2</option>
</optgroup>
<optgroup label="Question">
<option value="question1">Question1</option>
<option value="question2">Question2</option>
</optgroup>
<optgroup label="Response">
<option value="response1">response1</option>
<option value="response2">response2</option>
</optgroup>
<optgroup label="Value">
<option value="value1">value1</option>
<option value="value2">value2</option>
</optgroup>
<optgroup label="Today's Date'">
<option value="4.5.2017">4.5.2017</option>
</optgroup>
</select>
</div>
<!--<input class="form-control" placeholder="Email Subject" type="text" value="{{message.subject}}">-->
</section>
</div>
</div>
</fieldset>
<!--Message -->
<fieldset>
<div class="form-group">
<div class="row">
<section class="col-md-12 ">
<strong>Message</strong><label class="control-label required"></label>
<div class="summernote form-control" name="messageBody" [summernote]="{height: 120}"></div>
</section>
</div>
</div>
</fieldset>
<!--Action buttons -->
<fieldset>
<div class="smart-form pull-right">
<section class="col-md-12 p ">
<div class="btn-group">
<button class="btn btn-sm btn-primary" type="button"><i class="fa fa-times"></i> Cancel </button>
</div>
<div class="btn-group">
<button class="btn btn-sm btn-success" type="submit" [disabled]="!emailForm.invalid" (click)="onSubmit()"><i class="fa fa-save"></i> Save </button>
</div>
</section>
</div>
</fieldset>
</div>
<!-- end widget content -->
</form>
This is how my form appears :
Here is my component.ts code:
import { Component, OnInit } from '#angular/core';
import { ActivatedRoute, Router } from '#angular/router';
import { OutlookService, Message } from '../shared';
import { EmailComposeService } from '../compose/compose.service';
import { EmailComposeModal } from '../../data-model/email-compose';
declare var $: any;
#Component({
selector: 'sa-compose',
templateUrl: 'compose.component.html',
})
export class ComposeComponent implements OnInit {
public $: any;
validatorOptions = {
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
templateName: {
validators: {
notEmpty: {
message: 'The template name is required and cannot be empty'
}
}
},
emailTo: {
validators: {
notEmpty: {
message: 'The sender email is required and cannot be empty'
}
}
},
messageBody: {
validators: {
callback: {
message: 'The content is required and cannot be empty',
callback: function (value, validator, $field) {
var code = $('[name="messageBody"]').summernote('code');
// <p><br></p> is code generated by Summernote for empty content
return (code !== '' && code !== '<p><br></p>');
}
}
}
}
}
};
public templateName: String = '';
public message: Message;
public carbonCopy: boolean = false;
public blindCarbonCopy: boolean = false;
public attachments: boolean = false;
public sending: boolean = false;
templateCategories: any;
constructor(private route: ActivatedRoute,
private router: Router,
private service: OutlookService, private composeservice: EmailComposeService) {
}
ngOnInit() {
this.message = new Message({})
this.composeservice.getTempateCategory(1, JSON.parse(localStorage.getItem('currentUser')).access_token).subscribe(data => {
this.templateCategories = data;
this.composeModel.CategoryId = data[0].Id;
});
}
isUpdate: boolean = false;
isDelete: boolean = false;
isCreateTemplate: boolean = false;
submitted = false;
composeModel = new ComposeClass();
onSubmit() {
//this.uploadImage();
if (this.isUpdate) {
let composePutData: EmailComposeModal = {
Id: +this.composeModel.Id,
IndustryId: +this.composeModel.IndustryId,
CategoryId: +this.composeModel.CategoryId,
Name: this.composeModel.Name,
Content: this.composeModel.Content,
Description: this.composeModel.Description,
Status: this.composeModel.Status,
CreatedBy: this.composeModel.CreatedBy,
CreateTimestamp: this.composeModel.CreateTimestamp,
ModifiedBy: localStorage.getItem('selectedRolesID'),
ModifiedTimestamp: new Date(),
DataStateFlag: this.composeModel.DataStateFlag
}
if (this.isDelete) {
this.composeservice.updateTemplate(composePutData, JSON.parse(localStorage.getItem('currentUser')).access_token).subscribe(res => {
if (res.status === 200) {
this.isUpdate = false;
this.isDelete = false;
this.composeModel = new ComposeClass();
this.isCreateTemplate = false;
$('.divMessageBox').hide();
}
});
} else {
this.composeservice.updateTemplate(composePutData, JSON.parse(localStorage.getItem('currentUser')).access_token).subscribe(res => {
if (res.status === 200) {
this.isUpdate = false;
this.composeModel = new ComposeClass();
this.isCreateTemplate = false;
$('.divMessageBox').hide();
}
});
}
} else {
var code = $('[name="messageBody"]').summernote('code');
let postdata: EmailComposeModal = {
IndustryId: 1,
CategoryId: +this.composeModel.CategoryId,
Name: this.composeModel.Name,
Content: code,
Description: this.composeModel.Description,
Status: "Active",
CreatedBy: localStorage.getItem('selectedRolesID'),
CreateTimestamp: new Date(),
DataStateFlag: "I",
"ModifiedBy": null,
"ModifiedTimestamp": null
}
this.submitted = true;
this.composeservice.createTemplate(postdata, JSON.parse(localStorage.getItem('currentUser')).access_token).subscribe(res => {
if (res.status === 200) {
this.composeModel = new ComposeClass();
this.isCreateTemplate = true;
$('.nav-tabs a[href="#a1"]').tab('show');
$('[name="messageBody"]').summernote('reset');
}
})
}
}
}
export class ComposeClass {
constructor(
public Id?: number,
public IndustryId?: number,
public CategoryId?: number,
public Name?: string,
public Content?: string,
public Description?: string,
public Status?: string,
public CreatedBy?: string,
public CreateTimestamp?: Date,
public ModifiedBy?: string,
public ModifiedTimestamp?: Date,
public DataStateFlag?: string
) {
}
}
The first input element is getting getting validated but the select fields and summernote fields are not getting validated.
I have finally resolved it.
The select2 validation would work simply if the excluded: [':disabled'] is added to the validatorOptions. It checks for null value.
Regarding the summernote, adding the following code to onInit() solved the issue :
$(".summernote")
.on('summernote.change', function(customEvent, contents, $editable) {
// Revalidate the content when its value is changed by Summernote
$('#emailForm').bootstrapValidator('revalidateField', 'content');
Hope this helps!
Related
Code (I'm working with Materialize CSS framework):
<form class="col s12" id="formRequer">
<div class="input-field col s6">
<select id="stdApply" name="stdApply" required>
<option value="" disabled selected>Escolha somente uma das opções</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<label>Selecione o que quer requerer</label>
</div>
</form> <!-- END: form class="col s12" id="formRequer -->
<button class="btn waves-effect waves-light" type="submit" id="btn_submitRequer" form="formRequer">Enviar
<i class="material-icons right">send</i>
</button>
I copied the code excluding CSS and paste it on w3school and it worked fine!
Is it possible that HTMLService evalute() process exclude the required attribute from tag or exclude the value="" attribute from the first option (this is vital for HTML5 select tag works with required attribute)?
Any help?
Try this:
HTML:
<html>
<head></head>
<body>
<form>
<select id="stdApply" name="stdApply">
<option value="" selected>Escolha somente uma das opções</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<label>Selecione o que quer requerer</label>
<br /><input type="button" value="Enviar" onClick="processForm(this.parentNode);" />
</form>
<script>
function processForm(obj) {
if(obj.stdApply.value!='') {
google.script.run.processForm(obj);
}else{
document.getElementById('stdApply').focus();
}
}
</script>
</body>
</html>
Google Script:
function processForm(obj) {
Browser.msgBox(obj.stdApply);
}
function showMyDialog() {
SpreadsheetApp.getUi().showModelessDialog(HtmlService.createHtmlOutputFromFile('ah3'), 'Test');
}
I'm trying to create a submit form, but all my v-model are giving me this error.
Here is one example of how I'm creating the form inputs:
<template>
<div class="card mx-xl-5">
<!-- Card body -->
<div class="card-body">
<div>
<form v-on:submit.prevent="pushLocation">
<div class="form-row">
<div class="col-md-6">
<label>Name:</label>
<input
type="text"
class="form-control"
v-model="txtLocationName"
/>
</div>
<div class="col-md-6"> <div class="card mx-xl-5">
<label>Description</label>
<input
type="text"
class="form-control"
v-model="txtLocDescription"
placeholder="Description"
/>
</div>
</div>
<div class="form-group">
<label for="type">Tipo de localização</label>
<select class="form-control" id="type" v-model="typeLoc">
<option value="museum">Museum</option>
<option value="restaurant">Restaurant</option>
<option value="tourist_attraction">Monument</option>
<option value="art_gallery">Galery</option>
</select>
</div>
<div class="col-md-6">
<label>Imagem</label>
<input type="url" class="form-control" v-model="urlImg" placeholder="Link" />
</div>
<div class="form-group row">
<div class="col-auto">
<button type="submit" class="btn btn-primary">Add</button>
</div>
</div>
</form>
</div>
</div>
And here is how I'm setting the properties on my script:
name: "LocationList",
data: function() {
return {
id: 0,
txtLocationName: "",
txtLocDescription: "",
typeLoc: "",
urlImg: "",
listLocation: [],
locationChecked: false
};},
methods: {
getLastLocationId() {
if (this.listLocation.length) {
return this.listLocation[this.listLocation.length - 1].id;
} else {
return 0;
}
},
checkLocationName() {
if (this.listLocation.length) {
for (const location of this.listLocation) {
if (location.Name == this.txtLocName) {
(this.locationChecked = false),
alert("nome de localização indisponivel");
} else {
this.userChecked = true;
}
}
}
},
pushLocation() {
this.checkLocationName();
this.getCoordenates();
if (this.locationChecked == true) {
this.$store.commit("ADD_USER", {
id: this.getLastLocationId() + 1,
Name: this.txtLocationName,
Description: this.txtLocDescription,
Type: this.typeLoc,
imgLink: this.urlImg
});
this.$router.push({ name: "adminLocations" });
} else {
alert("erro no registo");
}
}
}
I've done this type of forms multiple times, yet I can figure out why i'm having this error.I added the rest of my vue component. I get the error on all the property and methods, not only on "urlImg".Meaning all the properties that exist in the data and are in the form are giving me this error.
One last point, the final function, pushLocation() is also giving the error, saying that it is not a real function.
I have JSON model on backand:
{
"addresses": [
{
"maxTravelTime": 0,
"travelTypeId": 0
}
],
"categoryId": 0,
"maxPrice": 0,
"preferences": [
{
"categoryId": 0,
"travelTypeId": 0,
"travelTime": 0
}
]
}
and I have my ts code:
initForm() {
this.myForm = this._fb.group({
type: '',
category: '',
price: '',
rooms: '',
preferences: this._fb.array([this.initLocationRows()]),
addresses: this._fb.array([this.initAddressRows()]),
});
}
onSubmit(){
console.log(this.myForm.value);
}
html -
<form [formGroup]="searchForm" (ngSubmit)="onSubmit()">
<div class="col-md-10 panel">
<div class="col-md-2">
<div class="form-group">
<label for="type">Type</label>
<select class="form-control" id="type" name="type" formControlName="type">
<option *ngFor="let t of types" [ngValue]="t">{{t.typ}}</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="category">Category</label>
<select class="form-control" id="category" formControlName="category">
<option *ngFor="let c of categories" [ngValue]="c">{{c.cat}}</option>
</select>
</div>
</div>
</div>
<div formArrayName="locationRows">
<div class="row" *ngFor="let itemrow of searchForm.controls.locationRows.controls; let i=index" [formGroupName]="i">
<div class="col-md-3">
<div class="form-group">
<label for="category">Nearby</label>
<select class="form-control" id="nearby" formControlName="nearby">
<option *ngFor="let p of preferences" [ngValue]="p">{{p.pref}}</option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="maxtime">Max travel time</label>
<select class="form-control" id="maxtime" formControlName="maxtime">
<option *ngFor="let t of maxTime" [ngValue]="t">{{t.int}}</option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="travel">Travel type</label>
<select class="form-control" id="travel" formControlName="travel">
<option *ngFor="let tt of travelType" [ngValue]="tt">{{tt.tr}}</option>
</select>
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<button style="margin-top: 30px;" *ngIf="searchForm.controls.locationRows.controls.length > 1" (click)="removeLocationRow(i)" class="btn btn-danger btn-xs">-</button>
</div>
</div>
</div>
</div>
</form>
console log form data looks like:
addresses: Array [ {…} ]
preferences: Array [ {…}, {…} ]
category: Object { id: 3, cat: "Office" }
price: "100"
rooms: "All"
type: Object { id: 2, typ: "Rent" }
How to get specific controls value from this myForm.value and add it to JSON according to JSON model?
myForm.value is an Object so you can access it's properties like any other object, something like myForm.value.addresses , so if you need only specific value just call it
Hi I want to Pass input elements values while clicking button using post method and pass values to next view using CI. When submitting the button with values in input elements and redirecting it works well. But When I'm refreshing after redirecting the page the values of input elements are lost and shows blank page/the page i display when the value becomes null.
1st View
<form action="<?php echo base_url() ?>Mapcontrol/display_garage_by_location" method="post">
<div class="section_1">
<select id="cmbcity" name="cmbcity" class="frm-field required">
<option value="null">Select Your City</option>
<option value="1">fghfghfghf</option>
<option value="2">fghfghfgh</option>
<option value="3">fghfgh</option>
<option value="4">ffffffff</option>
<option value="5">hhhh</option>
<option value="6">dddd</option>
<option value="7">treee</option>
<option value="8">kiu</option>
</select>
</div>
</div>
<div class="col-md-3 dropdown-button">
<div class="input-group">
<span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span>
<input type="text" id="txtPlaces" placeholder="Enter a location" />
<input type="hidden" id="city2" name="city2" />
<input type="hidden" id="cityLat" name="cityLat" />
<input type="hidden" id="cityLng" name="cityLng" />
</div>
</div>
<div class="col-md-3 dropdown-button">
<div class="section_1">
<select id="cmbvehicletype" name="cmbvehicletype" class="frm-field required">
<option value="null">Type</option>
<option value="cr">dd</option>
<option value="mb">ghjghjd</option>
<option value="tk">ghjghj</option>
<option value="ar">hgjghj</option>
<option value="bi">gggh</option>
<option value="ov">gg</option>
</select>
</div>
</div>
<div class="col-md-3 dropdown-button">
<div class="section_1">
<select id="cmbservice" name="cmbservice" class="frm-field required">
<option value="null">Select</option>
<option value="vr">vr</option>
<option value="oc">oc</option>
<option value="br">br</option>
<option value="vs">vc</option>
<option value="sp">cc</option>
<option value="os">cd</option>
</select>
</div>
</div>
<div class="clearfix"> </div>
</div>
<div class="col-md-2 submit_button">
<input type="submit" id="searchindex" value="SEARCH"/>
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
Controller
public function display_garage_by_location()
{
// Loading Library
$this->load->library('googlemaps');
//Initialize our map. Here you can also pass in additional parameters for customising the map
$this->googlemaps->initialize();
// Create the map. This will return the Javascript to be included in our pages <head></head> section and the HTML code to be
// placed where we want the map to appear.
$data['map'] = $this->googlemaps->create_map();
// Load our view, passing the map data that has just been created
//$this->load->view('my_view', $data);
$data['locationvalue']=$this->input->post('city2');
$data['latvalue']=$this->input->post('cityLat');
$data['longvalue']=$this->input->post('cityLng');
$data['vehicleid']=$this->input->post('cmbvehicletype');
$data['serviceid']=$this->input->post('cmbservice');
$this->garage_location_markers($data);
}
public function garage_location_markers($data)
{
$this->load->view('templates/_header');
$this->load->view('content/locations-in-marker-view',$data);
$this->load->view('templates/footer');
}
2nd View
// In Second View I want to display if location value is null then dispaly no data found else display search results ..
The Problem is When location is not null it displays the details but when i refresh the page again control go back to the controller and results no data found.. How to Solve this?
Try Like this
In View
View user
In Controller
public function FunctionName($id) # determine function that receiving incoming parameter
{
if (empty($id)) {
echo "Token Missed Matched";
}
else{
# get data from model
$result = $this->model_name->model_function($id);
if(empty($result))
{
echo "No data found";
}
else{
$this->load->view('view_name');
}
}
}
I have a form with two fields, a drop-down list and a text box. Both drop-down and text box are mandatory but with one exception that if user selects "Other" the text-box will not be mandatory and will not show asterisk.
Form:
<form method="post" id="configForm" action="">
<div class="field">
<label class="required" for="type"><em>*</em>Type</label>
<div class="input-box">
<select name="type" class="required-entry">
<option value=""></option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="Other">Other</option>
</select>
</div>
</div>
<div class="field">
<label class="required" for="price"><em>*</em>Price</label>
<div class="input-box">
<input type="text" value="" name="price" class="required-entry">
</div>
</div>
</form>
Script:
<script type="text/javascript">
//< ![C
var Form= new VarienForm('configForm', true);
//]]>
</script>
Its feels awkward while answering my own question but as I solve it myself so posting because it may help someone else.
<script type="text/javascript">
//< ![C
Validation.add('conditional-required', 'This is a required field.', function(v) {
var type = $('type').getValue();
if(type == 'Other')
{
return ( (v != "none") && (v != null) && (v.length != 0));
}
else
{
return true;
}
});
//]]>
</script>
Add id type to dropdown list
<select name="type" class="required-entry" id="type">
Add class conditional-required to text field
<input type="text" value="" name="price" class="conditional-required">
Fairly Simple!