1.I have added dynamic array field which changes on the dropdown. and I have added "required" in html
$.each(data.result, function (key, value) {
if (typeof value['filter'] !== "undefined") {
var id = value['filter']['id'];
var name = value['filter']['name'];
$(".label_filter2").append('<div class="form-group m-form__group"><label class="custom_form_label">' + name + '<span class="error_msg">*</span></label><input type="text" class="form-control m-input m-input--air filter_specification" name="filter[' + id + ']" placeholder="Enter ' + name + '" data-toggle="m-tooltip" required title="' + name + '"></div>');
}
});
2.Its totally work, but problem is validation message same like label.
https://www.screencast.com/t/Hqawm0Tae
3.I need "this field is require" message.I hope you are understand my question.Please help me.
Related
I'm using Laravel for my application.
I have made a PRINT button on my HTML page which is simply calling a route, to be able to send it throught DOMPDF to print it to PDF.
Print
Now, in my Controller, I would like to get the value of a radio button which has been created in the HTML this way
<div class="col-lg-7 selectie">
<input type="radio" name="factuur_selectie" id="factuur_selectie" value="1" checked> Alle facturen 
<input type="radio" name="factuur_selectie" id="factuur_selectie" value="2"> Betaalde facturen
<input type="radio" name="factuur_selectie" id="factuur_selectie" value="3"> Onbetaalde facturen
</div>
In my controller I can not find the way to get the value of the checkbox, I suppose because I'm not doing a submit ?
How would I be able to get the value of the radio button please?
public function printFacturen(Request $request){
}
I already tried three following ways, but it is not working :
$fields = Input::get('factuur_selectie');
$value = $request->get('factuur_selectie');
$request->input('factuur_selectie');
Bestregards,
Davy
You need to grab the value of factuur_selectie using JavaScript and add it to the generated URL, something like:
var val = document.querySelector('#factuur_selectie:checked').value;
var btn = document.querySelector('.btn.btn-default');
var url = btn.getAttribute('href');
btn.setAttribute('href', url + '?factuur_selectie=' + val);
Then you should be able to retrieve factuur_selectie from your controller.
Probably you are going to need to update the value everytime an option is selected. In that case you can retrieve the value from then event itself:
var btn = document.querySelector('.btn.btn-default');
document.querySelector('.selectie').addEventListener('change', function(event) {
var val = event.target.value;
var url = btn.getAttribute('href');
var pos = url.indexOf('?');
// If URL already contains parameters
if(pos >= 0) {
// Remove them
url = url.substring(0, pos);
}
btn.setAttribute('href', url + '?factuur_selectie=' + val);
});
Here you have a working example.
I created a column inside my kendo grid in mvc as follows with a anchor tags based on true or false of a field.
columns.Bound(c => c.IsMapped).Width(140).ClientTemplate(
"# if (IsMapped == true) { #" +
"<a href='DeleteMap?Id=#=Id#' class='btn btn-xs default'>UnMap </a>" +
"# } else { #" +
"<a onclick=\"Show(this);\" href='javascript:void(0);'
class='btn btn-xs default'> Map </a>" +
"# } #" );
The first anchor tag is working fine and invoking my controller action. But the second anchor tag is not invoking the java script function. My Java script function is as follows.
function Show(e) {
e.preventDefault();
alert('Test1');
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
var wnd = $("#portal").data("kendoWindow");
wnd.refresh({
url: "Test",
data: { id: dataItem.Id, pvid: dataItem.PVId }
});
wnd.center().open();
};
when I look in the page source, the second anchor tag is rendered as follows that has no onclick attribute set.
<a class="k-grid-filter" href="javascript:void(0)"><span class="k-icon k-
filter"></span></a>
Anything wrong in my code? Thanks in advance
Personally this is what I would do for your template to make it easier to maintain and test.
Restructure your current template from the nested JavaScript in your razor code and pull it out into a separate function like so:
columns.Bound(c => c.IsMapped).Width(140).ClientTemplate("#=unMap(data)#");
then create the associated function:
function unMap(data){
var retString = '';
if(data.IsMapped === true) {
retString = 'UnMap ';
}
else {
retString = '<a data-map="'+ data.Id + '" href="#" class="btn btn-xs default"> Map </a>';
}
return retString;
}
then in the events config for the grid add this:
.Events(events => events.DataBound("onBoundData"))
then attach this JavaScript function:
function onBoundData(e) {
$("a[data-map]").on("click", function (me) {
me.preventDefault();
//do your Show(this) method in here
});
}
this will then bind the event to the links with the data-map attribute.
Hope this helps and if you have any follow up questions feel free to ask.
Instead of building anchor tag like this
onclick=\"Show(this);\"
change it to
onclick='Show(this);'
the following code worked for me. Here I am assigning a css class to anchor element and handling click event of anchor element using jquery based on css class.
#Html.ActionLink("UnMap", "DeleteMap", new { Id = #item.Id })
</text>).ClientTemplate(
"# if (IsMapped == true) " + #"{# <a href=""DeleteMap?
Id=#=Id#"">UnMap</a>" + "# } " +
#"else {# <a href=""\#"" class='myCommand'>Map</a>" + "# } #").Width(75);
Thats working for me
cshtml
columns.Bound(c => c.REQUESTNUMBER).Title("Request ID").ClientTemplate("#=urlMap(data)#").Width(140);
js
var urlMap = function(obj){
return "" + obj.REQUESTNUMBER + "";
}
I am trying to create an onchange event in zend framework 2. suppose if i change option form dropdown list then the related value will be shown on input field .Here my dropdown works fine .but when i am trying to change dropdown list then there is no value shows on my input field.but the data comes.but not display on broweser.So tell me how it is possible.
Here is My Controller
public function propratingAction()
{
$projectName = $this->propinquity()->projectName();
if($this->getRequest()->isPost())
{
$project =$this->getRequest()->getPost('project');
$projectD = json_decode($project, true);
//print_r($projectD);
$propinquityindex=$this->propinquity()->getproprating($projectD);
$propratingHTML=$this->propratingHTML($propinquityindex);
print_r($propratingHTML);
}
$viewModel = new ViewModel();
$viewModel->setVariables(array('key' => 'value'))
->setTerminal(true);
return $viewModel;
}
public function propratingHTML($propinquityindex){
$html='';
foreach ($propinquityindex as $value) {
# code...
$html .='<input type="text" value="'.$value['critics_rating'].'"/>';
}
print_r($html);
$viewModel = new ViewModel();
$viewModel->setVariables(array("key" => "value"))
->setTerminal(true);
return $viewModel;
}
Here is view part
<div style="display:inline-block; margin-left:55px; margin-top:20px;">
<select style="width:12.5em;" id="project_id" onchange="getsectorindexAjax();"
data-placeholder="Project Name" class="selectError2" data-rel="chosen"
name="project_id" >
<option value="">--select project--</option>
<?php if($this->projectName){
foreach($this->projectName as $val){
echo '<option value="'.$val['project_id'].'">'.$val['Project_name'].'
</option>';
}
} ?>
</select>
</div>
<div class="main" style="display:inline-block; margin-left:10px;margin-top:20px;">
CRc Rating
<input style="width:20em;height:2.7em;" name="critics_rating"
id="critics_rating" type="text" value="">
</div>
ajax call
function getsectorindexAjax()
{
require(["dojo/request", "dojo/query","dijit/registry"], function(request, registry) {
// Locate the JS object.
var project = dojo.byId("project_id").value;
//alert(project);
request.post("http://localhost/admin/propinquity/proprating",{
data : {
project : JSON.stringify(project)
}
}).then(function(text) {
dojo.byId("critics_rating").innerHTML = text;
console.log("return data : " + text);
});
});
}
So suggest me how can i show value inside input field when my dropdown value is change.
You can try something like this :
var dropdown= dijit.byId("project_id"); //get the select element
//on change event
dropdown.on('change', function(evt) {
//get the selected value
var project = dropdown.get("value");
//your ajax request
request.post("http://localhost/admin/propinquity/proprating",{
data : {
project : JSON.stringify(project)
}
}).then(function(text) {
dijit.byId("critics_rating").attr("value", text);
console.log("return data : " + text);
});
});
i got a template created for custom zip code field.
My template code is below:
#{
string model = Model ?? string.Empty;
string zipFirst = "";
string zipSecond = "";
if(!String.IsNullOrEmpty(model) && !String.IsNullOrWhiteSpace(model))
{
var values = model.Split('-');
if(values.Count() == 2)
{
zipFirst = values[0] ?? string.Empty;
zipSecond = values[1] ?? string.Empty;
}
}
var pName = ViewData.ModelMetadata.PropertyName;
var zipAreaId = "#" + pName + "zipcodearea";
}
<div id="#(pName)zipcodearea">
<input type="text" maxlength="5" id="zipcodefirst" name="#(pName)codefirst" value="#(zipFirst)" style="width:136px"/> -
<input type="text" maxlength="4" id="zipcodesecond" name="#(pName)codesecond" value="#(zipSecond)" style="width:120px"/>
#Html.HiddenFor(m => m, new { #class = "generatedZipField"})
</div>
<script type="text/javascript">
jQuery(function ($) {
$('#(zipAreaId) #zipcodefirst').autotab({ target: '#(pName)codesecond', format: 'numeric' });
$('#(zipAreaId) #zipcodesecond').autotab({ previous: '#(pName)codefirst', format: 'numeric' });
$('#(zipAreaId)').zipcode();
});
</script>
And i use it like this:
[UIHint("ZipCode")]
[Display(Name = "Zip Code")]
public string Zip { get; set; }
Like you see in my template i got two fields whats not included in the model.
It is #zipcodefirst and #zipcodesecond.
What i need to achieve is to have two separate fields for full us zip code.
When user fill both fields im using jquery widget for merging them into one string and inserting it into hidden field in template. after form submited value in hidden field getting sent into server.
Whats the problem?
I need to add mvc unobtrusive validation for them two fields whats not in the model #zipcodefirst and #zipcodesecond.
validation rules
zipcodefirst field must be filled in first
then zipcodefirst field is filled you can fill second field
second field must have 4 digits in it
first field must have five digits
cant fill second field while first one is empty or incorectly filled
Im strugling with validation part for quite a while now.... :(
How i could achieve that thru mvc3 unobtrusive validation tools?
any help will be highly apreciated guys.
Add unobrusive data data validation on the textbox by adding data-val="true" and use a regular expression for your zip code.
<input type="text" data-val="true" data-val-regex="Invalid zip code format" data-val-regex-pattern="YOUR REGEXP HERE" />
UPDATE
If you also want it to be required you can add the data-val-required attribute.
<input type="text" data-val="true" data-val-requred="Zip code is required" data-val-regex="Invalid zip code format" data-val-regex-pattern="YOUR REGEXP HERE" />
More information about validation in MVC 3:
http://bradwilson.typepad.com/blog/2010/10/mvc3-unobtrusive-validation.html
I have created a add email method (jquery) to validate a multiple emails for recipient text box. it's working fine when prototype.js is not declared on the page. To get rid of the $ conflict i also incorporated the $ noconflict() method measure measure. The other field validations are working in this scenario, except the receipient email validation field. AS per my finding "jQuery.validator.methods.email.call(this, value, element)" line no 50 of the page is not working and hence the method is not firing . I need to call the prototype.js as well. Please see the following code for a clearer understanding.......Thanks in advance.
Please see the code below:
Multi Email Validation
var JQ = jQuery.noConflict();
JQ(document).ready(function() {
// Handler for .ready() called.
JQ("#email-form").validate({
rules : {
email : {
required : true,
email : true
},
recipientEmail : {
multiemail: true,
required : true
// email : true
}
},
messages: {
email: {
required: "Please enter your email address.",
email: "Please enter a valid email address"
},
recipientEmail: {
multiemail: "One or more of your recipient email addresses needs correction.",
required: "Please enter the recipient's email address."
//email: "Please enter a valid email address"
}
}
});
});
JQ.validator.addMethod("multiemail", function(value, element) {
if (this.optional(element)) // return true on optional element
return true;
// var emails = value.split( new RegExp( "\s*,\s*", "gi" ) );
var emails = value.split( new RegExp( "\s*,\s*", "gi" ) );
valid = true;
maxEmaillength = emails.length;
for(var i in emails)
{
value = emails[i];
valid = valid && jQuery.validator.methods.email.call(this, value, element);
// Maximum email length validation
if(maxEmaillength > 5)
{
JQ('label.error:first').html("Please enter only 5 mail IDs at a time");
JQ('label.error:first').css(display, block);
setTimeout(alert("Please enter only 5 mail IDs at a time"), 5);
}
}
return valid;
}, 'One or more email addresses are invalid');
</head>
<body>
<form action="" method="get" name="email-form" id="email-form">
<label for="email">email</label>
<input type="text" name="email" id="email" style="width:200px" />
<br />
<label for="recipientEmail">Recipient Email</label>
<input type="text" name="recipientEmail" id="recipientEmail" style="width:500px" /><br />
<input type="submit" name="Submit" id="Submit" value="Submit" />
</form>
</body>
</html>
I have just change the approach a little bit, as jQuery.validator.methods.email.call(this, value, element) was not working in the previous custom method. Although i could not find the exact reason, why that was not working with prototype.js and what the exact solution for that problem. But the following code snippet is working as desired. Just replace that previous jquery custom email method with the following one.
function validateEmail(field) {
var regex=/\b[A-Z0-9._%+-]+#[A-Z0-9.-]+\.[A-Z]{2,4}\b/i;
return (regex.test(field)) ? true : false;
}
JQ.validator.addMethod("multiemail", function(value, element)
{
var result = value.split(",");
for(var i = 0;i < result.length;i++)
if(!validateEmail(result[i]) || result.length > 5)
return false;
return true;
},'One or more email addresses are invalid');