Develop Reference

How can I add validation to an Input field? Binding JSON model doesn't work

I try to learn SAPUI5 with Samples frpm Demo kit Input - Checked. I get an error message: oInput.getBinding is not a function
I have a simple input field xml:
<Label text="Name" required="false" width="60%" visible="true"/>
<Input id="nameInput" type="Text" enabled="true" visible="true" valueHelpOnly="false" required="true" width="60%" valueStateText="Name must not be empty." maxLength="0" value="{previewModel>/name}" change= "onChange"/>
and my controller:
_validateInput: function(oInput) {
var oView = this.getView().byId("nameInput");
oView.setModel(this.getView().getModel("previewModel"));
var oBinding = oInput.getBinding("value");
var sValueState = "None";
var bValidationError = false;
try {
oBinding.getType().validateValue(oInput.getValue());
} catch (oException) {
sValueState = "Error";
bValidationError = true;
}
oInput.setValueState(sValueState);
return bValidationError;
},
/**
* Event handler for the continue button
*/
onContinue : function () {
// collect input controls
var that = this;
var oView = this.getView();
var aInputs =oView.byId("nameInput");
var bValidationError = false;
// check that inputs are not empty
// this does not happen during data binding as this is only triggered by changes
jQuery.each(aInputs, function (i, oInput) {
bValidationError = that._validateInput(oInput) || bValidationError;
});
// output result
if (!bValidationError) {
MessageToast.show("The input is validated. You could now continue to the next screen");
} else {
MessageBox.alert("A validation error has occured. Complete your input first");
}
},
// onChange update valueState of input
onChange: function(oEvent) {
var oInput = oEvent.getSource();
this._validateInput(oInput);
},
Can someone explain to me how I can set the Model?

Your model is fine and correctly binded.
The problem in your code is here, in the onContinue function
jQuery.each(aInputs, function (i, oInput) {
bValidationError = that._validateInput(oInput) || bValidationError;
});
aInput is not an array, so your code is not iterating on an array element.
To quickly fix this, you can put parentheses around the declaration like this:
var aInputs = [
oView.byId("nameInput")
];
Also, you could remove the first two lines of the _validateInput method since they are useless...

Usually, we set the model once the view is loaded, not when the value is changed. For example, if you would like to set a JSONModel with the name "previewModel", you can do as mentioned below.
Note that onInit is called when the controller is initialized. If you bind the model properly as follows, then the oEvent.getSource().getBinding("value") will return the expected value.
onInit: function(){
var oView = this.getView().byId("nameInput");
oView.setModel(new sap.ui.model.json.JSONModel({
name : "HELLO"
}), "previewModel");
},
onChange: function(oEvent) {
var oInput = oEvent.getSource();
this._validateInput(oInput);
},
...
Also, for validating the input text, you can do the following:
_validateInput: function(oInput) {
var oBinding = oInput.getBinding("value");
var sValueState = "None";
var sValueStateText = "";
var bValidationError = false;
if(oBinding.getValue().length === 0){
sValueState = "Error";
sValueStateText = "Custom Error"
}
oInput.setValueState(sValueState);
if(sValueState === "Error"){
oInput.setValueStateText(sValueStateText);
}
return bValidationError;
},
Please note that the code above is not high quality and production ready as it's a quick response to this post :)

Multiple jQuery regex test

I'm trying to perform multiple regex test on input filed.
Below the script:
$("#search-registration").keyup(function () {
var input_data = $('#search-registration').val();
var regexTest = function() {
this.withPrefix = /^[iI]-[a-zA-Z]{4}$/;
this.noPrefix = /^[a-zA-Z]{4}$/;
}
if(regexTest.withPrefix.test(input_data) || regexTest.noPrefix.test(input_data)) {
console.log(input_data);
$( "div.result" ).html(input_data);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="search-registration" name="regcode" class="form-control" placeholder="Search">
<div id="result">
</div>
I'm not able to perform the double regex and I get the following error:
Uncaught TypeError: Cannot read property 'test' of undefined
What am I doing wrong? Honestly I'm not able to figure out the issue.
Thanks

You need the 'new' keyword before function, like this:
var regexTest = new function() {
this.withPrefix = /^[iI]-[a-zA-Z]{4}$/;
this.noPrefix = /^[a-zA-Z]{4}$/;
}

Try using
var regexTest = Object({
withPrefix : "/^[iI]-[a-zA-Z]{4}$/",
noPrefix : "/^[a-zA-Z]{4}$/",
test : function (input_data) {
//test code here
}
});
Instead of
var regexTest = function() {
this.withPrefix = /^[iI]-[a-zA-Z]{4}$/;
this.noPrefix = /^[a-zA-Z]{4}$/;
}

Pass input text value to javascript not working

Good day. I have read and done almost all of the solution in the questions but cant seem to solve my problem. As written in my question, in mvc, i am passing a value from controller to view a string and then get by javascript to run a modal if ever a certain condition is met. please help. thanks.
here is the code in my controller:
public ActionResult Series()
{
List<sample> series = db.samples.Where(x => x.status == "False").ToList();
if ( series.Count == 0)
{
ViewBag.Info = "None";
}
else {
ViewBag.Series = series;
ViewBag.Info = "Have";
}
return View();
}
My View:
<input type="text" value="#ViewBag.Info" id="info" name="info" />
My Javascript:
#section Scripts{
<script>
$(window).on('load', function () {
var modelll = document.getElementById("#(ViewBag.Info)").value;
var s_end = document.getElementById("myNumber2").value;
var s_current = document.getElementById("myNumber3").value;
var s_status1 = document.getElementById("status").value;
var s_id1 = parseInt(document.getElementById("myNumber").value);
var s_end2 = parseInt(s_end, 10);
var s_current2 = parseInt(s_current, 10);
var x = parseInt(s_current, 10) + 1;
document.getElementById("item1").value = s_id1;
document.getElementById("item2").value = s_end;
document.getElementById("item3").value = x;
document.getElementById("status2").value = s_status1;
if (modelll === 'Have')
{
if ((s_current2 > s_end2) && (s_current2 != s_end2)) {
$('#myModal').modal({ backdrop: 'static', keyboard: false });
$('#myModal').modal('show');
}
}
else
{
$('#myModal').modal({ backdrop: 'static', keyboard:false });
$('#myModal').modal('show');
}
});
</script>
}

getElementById need an ID but you are passing #ViewBag.Info. change it to :
var modelll = document.getElementById("info").value;
also you are making many extra variables which are not really needed. for example to get what you have in s_current2, you can use
var s_current = parseInt(document.getElementById("myNumber3").value, 10);
no need to create another variable to convert it to integer.

To get the value from textbox
var modelll = document.getElementById("info");
To set the value to textbox
document.getElementById("info").value = var modelll;
you are using #ViewBag.Info instead of element id.

Following line is causing the problem in your code :
var modelll = document.getElementById("#(ViewBag.Info)").value;
// document.getElementById needs Id but you are passing #(ViewBag.Info) which is wrong
var modelll = document.getElementById("info").value; //info id of your textbox
// now check
if (modelll === 'Have')
{ }
else
{ }

How to separate javascript and markup in case of a script line with parameters?

Separating javascript and markup is easy when the script doesn't have parameters. But how is it done with inline script lines that do? Example:
<td class="input-cell">
<input type="radio" name="action-type" id="change-add" value="change-add"
onclick="showSelectTables('none','none','none','table','none','none')">
</td>
(....)
<script>
function showSelectTables(set1a,set1b,set1c,setSetup,set2,set3) {
var _1a = document.getElementById('careSelector');
_1a.style.display = set1a;
var _1b = document.getElementById('module-I');
_1b.style.display = set1b;
var _1c = document.getElementById('clarificSection');
_1c.style.display = set1c;
var setup = document.getElementById('setup');
setup.style.display = setSetup;
var _2 = document.getElementById('module-II');
_2.style.display = set2;
var _3 = document.getElementById('module-III');
_3.style.display = set3;
}
</script>
.
I've tried all varieties I can think of, but all I'm getting is error reports, 'undefined' or the silent treatment from the browser. Is it possible at all, and if so, how? I would be looking for a vanilla javascript solution.
EDIT: see here for what I'm trying to achieve: http://en.wikipedia.org/wiki/Unobtrusive_JavaScript, section 2.

I suggest you to change your HTML generation logic to generate the followings:
<td class="input-cell">
<input type="radio" name="action-type" id="change-add" value="change-add" />
</td>
<script>
// just show 2 variables for demo
var settings = { change-add : { set1a: 'some_value', set1b: 'some_value' } }
$('#change-add').click(function() {
showSelectTables($(this).attr('id'));
});
function showSelectTables(the_id) {
var set1a = settings[the_id]['set1']; // which returns 'some_value'
// similar for set1b,set1c,setSetup,set2,set3
var _1a = document.getElementById('careSelector');
_1a.style.display = set1a;
var _1b = document.getElementById('module-I');
_1b.style.display = set1b;
var _1c = document.getElementById('clarificSection');
_1c.style.display = set1c;
var setup = document.getElementById('setup');
setup.style.display = setSetup;
var _2 = document.getElementById('module-II');
_2.style.display = set2;
var _3 = document.getElementById('module-III');
_3.style.display = set3;
}
</script>
Note: this assumes you use jQuery.
An important note: there is nothing wrong to use inline onclick, but it's a better pattern to separate JS and HTML

knockout binding print function text instead of variable value

I'm writing a small application in JS and I decided to use Knockout.
Everything work well except from a single value that is not printed correctly and I don't understand why.
This is the html view where error appends (viaggio.arrivo is not visualized, and in place of correct value appears a function code like this "function c(){if(0 <arguments.length){if ..." and so on)
<input data-bind="value: viaggio.arrivo" />
And this is the javascript View Model.
Code is pretty long so I put it in a jsFiddle.
function ViewModel() {
function Viaggiatore(nome, cognome, eta, citta) {
var self = this;
self.nome = nome; self.cognome = cognome;
self.eta = ko.observable(eta);
self.citta = ko.observable(citta);
}
function Viaggio(viaggiatore, partenza, arrivo, mete) {
var self = this;
self.viaggiatore = ko.computed(viaggiatore);
self.partenza = ko.computed(partenza);
self.arrivo = ko.observable(arrivo);
self.mete = ko.computed(mete);
}
self.viaggiatore = new Viaggiatore("Mario", "Rossi", 35, "Como");
self.viaggio = new Viaggio(
function(){ return self.viaggiatore.nome+" "+self.viaggiatore.cognome; },
function(){ return self.viaggiatore.citta; },
"Roma",
function(){ return "mete" ;}
);
}
ko.applyBindings(new ViewModel());

I think you need brackets on one of your parameters, like so:
<p data-bind="text: viaggio.partenza()"></p>
Check out the updated fiddle: http://jsfiddle.net/mGDwy/2/