show * when field not valid - html

I am at level 0 in breeze so bear with me. I dont want any ready made code as of now. I am using breeze and want to do client side validation. What i want is to show "*" near html input if data entered is not valid. Below is my code to bind to data returned from breeze.
<td > <input data-bind="value: Name" /></td>
How can i achieve this using breeze? Please do let me know if there any live example i can refer to.
I tried googling but couldnt find any examples.

Not breeze, but pure JS might help?
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<style type='text/css'>
span.red { color:red; }
</style>
<script>
function ValidateFields() {
//usually use regex to check phones, this is only example.
// test if value is '123456' in this example.
if ('123456' == document.getElementById('inpPhone').value) {
document.getElementById('spnPhoneValid').innerHTML = '';
} else {
document.getElementById('spnPhoneValid').innerHTML = '*';
}
}
</script>
</head>
<body>
Phone Number (Only 123456):<input id='inpPhone' onchange='ValidateFields();'> <span class='red' id='spnPhoneValid'>*</span>
</body>
</html>
And of course it's for the client's usability and not instead of server-side validation!

Breeze IS NOT a tool for making html/css modifications to the page view. Breeze knows nothing about DOM.

Related

Regex running time Validation (m)m:ss

Im trying to validate a form that checks for valid running distance times, so i want it to allow times with single digits for minutes i.e. 2:55, or 12:55 would both pass the validation. Here is what i've come up with but it only works for 1 digit minutes.
/^\d:[0-5]\d$/
How do i change this to allow also the 2 digit minutes?
OK i worked it out. Here is the answer for anyone thats looking for a solution in the future
(([0-5][0-9])|([0-9]))(:[0-5][0-9])
Looking at your answer I think you should use instead
/^[0-5]?\d:[0-5]\d/
Here's an interactive example :
<!DOCTYPE html>
<html>
<head>
<title>Form validation</title>
</head>
<body>
<h1>Form validation question</h1>
<p>This is an example that shows test answers for the question</p>
<form name="example">
<input onchange="updateResult(this.value)" /><br />
<p id="result"></p>
</form>
<script>
function updateResult(text_entered){
var output_text_element = document.getElementById("result");
var pattern = /^[0-5]?\d:[0-5]\d/;
if (pattern.test(text_entered)) {
output_text_element.innerHTML = "Valid time";
} else {
output_text_element.innerHTML = "Invalid time";
}
};
</script>
</body>
</html>
This code says:
Valid time for 2:34
Valid time for 32:34
Invalid time for 32:64
Invalid time for 82:64
Invalid time for 82:14

AngularJS: {{EXPRESSION}} displaying as {{expression}} instead of result

Fixed: Thanks to #Sajeetharan, it was discovered that amongst other things the function the expression was attempting to display, GenerateRef, was broken and causing the issue.
I understand this is a reasonably common question but so far my following of other posts or tutorials has not been able to fix my issue with getting {{}} to display the result.
I am trying to make a simple web app to take in a new request. This is given a randomly generated ID which is then presented in a table and is what I'm having problems displaying in the table. Despite following tutorials and attempting to debug it I am unable to, probably as I am very new to Angular and HTML. Apologies in advance.
angular.module('ReqWebApp', [])
pegasusWebApp.controller('ReqAppController', function ReqAppController($scope) {
$scope.GenerateRef = ["RF" + date.now()]
});
<!DOCTYPE html>
<html ng-app="ReqWebApp">
<head>
<meta charset="UTF-8">
<title>New Request</title>
<script src="../../app.js"></script>
<script src="../../bower_components/angular/angular.js"></script>
</head>
<body ng-controller="ReqAppController">
<p><span>Add New Request | Accept <input type="checkbox" name="accept"> | Decline <input type="checkbox" name="decline"></span></p>
<table border="1">
<tr><th>REF : {{GenerateRef}}</th> <th>Producer Reference : <input type="text" name="prodRef"></th></tr>
<tr><th>Producer :
<select>
<option>EXAMPLE</option>
<option>EXAMPLE</option>
</select></th> <th>Producer Site : <input type="text"></th>
</tr>
</table>
</body>
</html>
The script locations should be working locally for me (I have tested this) as I am using Bower and Node to install, maintain and run AngularJS and the project. I have tried setting out the AJS controller several different ways so far according to different tutorials and Stack Overflow posts and this is the current rendition as it was the most up to date I could find.
Also worth noting is there have been some edits to the snippet from the code I'm running and some typos or other errors may be a result of me changing variable names to post here.
Thanks to anyone taking the time to read through.
You need to have it as,
var pegasusWebApp = angular.module('ReqWebApp', [])
pegasusWebApp.controller('ReqAppController', function ReqAppController($scope) {
$scope.GenerateRef = ["RF" + date.now()]
});
you are missing the declaration part. also angular reference should be loaded before loading app.js
<script src="../../bower_components/angular/angular.js"></script>
<script src="../../app.js"></script>
DEMO
var pegasusWebApp = angular.module('ReqWebApp', [])
pegasusWebApp.controller('ReqAppController', function ReqAppController($scope) {
$scope.GenerateRef = ["RF" + new Date()]
});
<!DOCTYPE html>
<html ng-app="ReqWebApp">
<head>
<meta charset="UTF-8">
<title>New Request</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-controller="ReqAppController">
<p><span>Add New Request | Accept <input type="checkbox" name="accept"> | Decline <input type="checkbox" name="decline"></span></p>
<table border="1">
<tr><th>REF : {{GenerateRef}}</th> <th>Producer Reference : <input type="text" name="prodRef"></th></tr>
<tr><th>Producer :
<select>
<option>EXAMPLE</option>
<option>EXAMPLE</option>
</select></th> <th>Producer Site : <input type="text"></th>
</tr>
</table>
</body>
</html>

Trying to get import to work

Inspired by this html5rocks post, I thought I'd try link rel="import".
In the console, I get:
yay!
Loaded import: http://www.example.com/HelloWorld.htm
But I don't get "Hello World!" on the page.
Here's my code:
<!DOCTYPE html>
<html>
<body>
<script>
function supportsImports() {
return 'import' in document.createElement('link');
}
if (supportsImports()) {
console.log('yay!')
} else {
console.log('boo!')
}
function handleLoad(e) {
console.log('Loaded import: ' + e.target.href);
}
function handleError(e) {
console.log('Error loading import: ' + e.target.href);
}
</script>
<link rel="import" href="HelloWorld.htm" onload="handleLoad(event)" onerror="handleError(event)">
</body>
</html>
And HelloWorld.htm contains:
<h1>Hello World!</h1>
Edit:
In the console, I can see that <h1>Hello World!</h1> is inside the link tag as another #document, complete with <html><head></head></body>.
According to the same HTML5Rocks post, when you import an HTML resource, it is accessible as a JavaScript object. Specifically, a Document:
var myImport = document.querySelector('link[rel="import"]').import;
document.querySelector(/* get the element we want here */).appendChild(myImport.body);
That does contradict somewhat with the beginning of the article, which balks at using JavaScript to load HTML, but at least it uses much less JavaScript (the kind that can, perhaps, fit in a browser tag) and certainly is not subject to the CORS restrictions that AJAX has to deal with.

Should I not use data attributes in html?

I am coding a C# forms application that lets a user add custom html nodes to a html webpage. I have some javascript code that selects a html node to execute specific code for objects such as a jQuery ui slider.
To identify html nodes, I need to store an attribute in the tag that identifies the tag.
I am new to writing html code, and as such, I would like to ask if there is any reason why I should not use data attributes for tags? Are there any limitations are disadvantages that I should be aware of?
Here is some example code that I have currently working:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div data-customwebpagelayout-name='slider-increments'>
<div data-customwebpageobject-name='slider-increments'></div>
</div>
<p data-customwebpageobject-output-name='slider-increments'>1</p>
</body>
</html>
Thank you.
The common way to identify and select HTML tags is with either class or id.
If there is only going to be one of something on a page, you should use id. It looks like you have multiple of the same thing you want to identify, so I'd use class like so:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="customwebpagelayout slider-increments" >
<div class="customwebpageobject slider-increments"></div>
</div>
<p class="customwebpageobject slider-increments">1</p>
</body>
</html>
Then you could select the nodes with javascript like so:
document.getElementsByClassName("slider-increments");
or if you decide to use jQuery:
$(".slider-increments");
Data attributes are more of a pain to work with:
Raw Javascript (code adapted from code in this answer):
var matchingElements = [];
var allElements = document.getElementsByTagName('*');
for (var i = 0, n = allElements.length; i < n; i++){
if (allElements[i].getAttribute('data-customwebpagelayout-name') !== null){
// Element exists with attribute. Add to array.
matchingElements.push(allElements[i]);
}
}
//use matchingElements;
jQuery:
$("*[data-customwebpagelayout-name='data-customwebpagelayout-name']");

Sending html input value only for mobile devices using CSS

The goal is to send a hidden input value to the server only when coming from a mobile device. I wanted to use CSS media queries so that it stays responsive.
I tried this so far:
Not displaying the field
<input type='hidden' name='mobile' value='yes' style="display:none">
Result: still sent to server
CSS content
<div class='mobile-only'></div>
#media (max-width: 768px) {
.mobile-only {content: "<input type='hidden' name='mobile' value='yes'>"}
}
Result: not sent to server at all
Is the non-JS, CSS approach even possible?
You can mix in some javascript and get it done. Here's something you'd like to take a look at -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#media (max-width: 768px) {
#mymobileelement {display:none;}
}
</style>
<script type="text/javascript">
function setvalue () {
var ele = document.getElementById("mymobileelement");
var isVisible = ele.offsetWidth > 0 || ele.offsetHeight > 0;
document.getElementById("ValueToSendToServer").value = (isVisible) ? "pc" : "mobile";
alert("Server will recieve = " + document.getElementById("ValueToSendToServer").value);
}
</script>
</head>
<body>
<input type="button" onclick="javascript:setvalue();" value="Click me to see what server will get">
<input type="hidden" value="pc" id="ValueToSendToServer">
<div id="mymobileelement"></div>
</body>
</html>
.mobile-only {content: "<input type='hidden' name='mobile' value='yes'>"}
This is invalid code - the content attribute is only valid on the ::before and ::after pseudoelements. However, even if you fix that it will not work, since the content attribute will only insert text, not 'more elements' as you are trying to do now.
There is no solution for your problem this way. Not only should CSS never have influence on behaviour like this, but it would also be highly unreliable - I can resize my desktop browser to 500px wide no problem.
You will need JS to achieve this effect, but even then it will remain unreliable, like anything coming from a client.