Input field still accepts digits in Javascript - validation

My code problem is that the input field for user name still accepts digits .
I tried to validate it with match() and (else if) but still not working.
The execution jumps to the (else) line.
please any help will be appreciated.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Functions in JS</title>
<script language="Javascript">
function showName() {
var entered=document.getElementById("name1").value;
var patt1 =/\[0-9]/g;
if( entered !==''){
document.getElementById("demo").innerHTML= entered;
}
else if( entered.match(patt1) ){
document.getElementById("demo").innerHTML="please enter a valid value";
}
else{
document.getElementById("demo").innerHTML="please enter value";
}
}
</script>
</head>
<body>
<form>
<label>Name:</label>
<input type="text" name="name1" id="name1" title="Only Alphabets" >
</form>
<input type="submit" onClick="showName();" >
<p><span id="demo"></span></p>
</body>
</html>

You have to test() your input against the pattern. From w3schools:
The test() method tests for a match in a string.
This method returns true if it finds a match, otherwise it returns
false.
<script language="Javascript">
function showName() {
var entered = document.getElementById("name1").value;
var pattern = /[0-9]+$/;
if(entered == ""){
document.getElementById("demo").innerHTML="Please enter a value";
} else if(pattern.test(entered)){
document.getElementById("demo").innerHTML="Please enter a valid value";
} else {
document.getElementById("demo").innerHTML=entered;
}
}
</script>
In my solution I'm only looking for two exceptions: No input and input contains a number. Everything else is allowed. You might need to change it to your needs :)

function showName() {
var entered=document.getElementById("name1").value;
var patt1 =/[0-9]+$/;
if(entered.match(patt1) ){
document.getElementById("demo").innerHTML='please enter a valid value '
}
else{
document.getElementById("demo").innerHTML= entered;
}
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Functions in JS</title>
<script language="Javascript">
</script>
</head>
<body>
<form>
<label>Name:</label>
<input type="text" name="name1" id="name1" title="Only Alphabets" >
</form>
<input type="submit" onClick="showName();" >
<p><span id="demo"></span></p>
https://plnkr.co/edit/j39qy0aXOlfhkCW8upVL?p=preview

Related

Jasmine: How to test a user input?

I wrote the following html file:
<!DOCTYPE html> <html lang="en"> <head>
<meta charset="UTF-8">
<title></title> </head> <body>
<h1> HELLO WORLD </h1>
<button type="button"> CLICK HERE</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$('button').click(function() {
$('h1').text("Thank you");
var ans = prompt("Please type your age");
if (ans > 80) {
$('h1').text("You're old");
}
})
</script> </body> </html>
I want to test that once the user clicks on the button and gives an age older than 80, the page behaves as expected and the h1-tag text changes to "You're old".
My question is how to write a Jasmine spec to test this feature?
You need to use "Spy" object to intercept "prompt" function and return your own value. After check the caption text. The code may look like ...
deascribe("test inline function:", function() {
it("caption should be 'too old' for age of more than 80", function () {
spyOn(window, 'prompt').and.returnValue(81);
$('button').click();
expect($('h1').text()).toBe("You're old");
});
});

Uncaught Error: Parse Error: Unexpected token

new to parse and react and I'm I'm getting this error
Uncaught Error: Parse Error: Line 50: Unexpected token
observe: function() {
How can I fix it ?
Here is my whole code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width">
<link href='http://fonts.googleapis.com/css?family=Roboto:400' rel='stylesheet' type='text/css'>
<script src="http://fb.me/react-0.13.3.min.js"></script>
<script src="https://www.parsecdn.com/js/parse-latest.js"></script>
<!-- Now include parse-react.js -->
<script src="https://www.parsecdn.com/js/parse-react.js"></script>
</head>
<body>
<script src="./jquery.min.js"></script>
<script src="./jquery.velocity.min.js"></script>
<script src="./velocity.ui.min.js"></script>
<script src="./react.js"></script>
<script src="./JSXTransformer.js"></script>
<script type="text/jsx">
/** #jsx React.DOM */
var App = React.createClass({
render: function() {
var name=null;
var password=null;
var email=null;
return (
<div>
<label>Name</label>
<input type="text" ref="name" /><br/>
<label>Password</label>
<input type="password" ref="password" /><br/>
<label>Email</label>
<input type="email" ref="email" /><br/>
<button onClick={this.saveAndContinue}>
Save and Continue
</button>
</div>
)
},
saveAndContinue: function(e) {
e.preventDefault()
//debugger;
// Get values via this.refs
data = {
name: this.refs.name.getDOMNode().value,
password: this.refs.password.getDOMNode().value,
email: this.refs.email.getDOMNode().value,
}
//this.props.saveValues(data)
},
//this.props.nextStep()
saveValues: function()
{
return function()
{
mixins: [ParseReact.Mixin],
observe: function() {
return {
};
}
}
}
}
);
React.renderComponent(<App />, document.body);
</script>
</body>
</html>
Since I'm new to this so Any Help will be appreciated. Thanks
saveValues is a function that returns a function. Within the returned function body you seem to attempt to use object literal syntax.
function() {
a: "something",
b: "something else"
}
is not valid syntax. You probably mean to return some object.

angular.js validation of the javascript

At the moment this is my code:
<!doctype html>
<html ng-app="validation-example">
<head>
<script src="http://code.angularjs.org/1.0.6/angular.min.js"></script>
<link href="http://docs.angularjs.org/css/bootstrap.min.css" rel="stylesheet" />
<link href="http://docs.angularjs.org/css/font-awesome.css" rel="stylesheet" />
<link href="http://docs.angularjs.org/css/docs.css" rel="stylesheet" />
<link href="StyleSheet.css" rel="stylesheet" />
<script src="script.js"></script>
</head>
<body style="background-color: teal">
<link href="StyleSheet.css" rel="stylesheet" />
<div ng-controller="Controller">
<form name="form" class="css-form" novalidate>
Float:
<input type="text" ng-model="length" name="length" smart-float />
{{length}}<br />
<span ng-show="form.length.$error.float">This is not a valid float number!</span>
<br />
<button ng-click="submit()"
ng-disabled="form.$invalid">
Submit</button>
</form>
</div>
</body>
</html>
And js
var app = angular.module('validation-example', []);
function Controller($scope) {
$scope.master = {};
$scope.reset = function () {
$scope.user = angular.copy($scope.master);
};
$scope.reset();
$scope.submit = function () {
debugger;
if (form.$invalid)
{
alert("sss");
}
};
}
var FLOAT_REGEXP = /^\d+((\.|\,)\d+)?$/;
app.directive('smartFloat', function () {
return {
require: 'ngModel',
link: function (scope, elm, attrs, ctrl) {
ctrl.$parsers.unshift(function (viewValue) {
if (FLOAT_REGEXP.test(viewValue)) {
ctrl.$setValidity('float', true);
return parseFloat(viewValue.replace(',', '.'));
} else {
ctrl.$setValidity('float', false);
return undefined;
}
});
}
};
});
And i have the button disabled when the float is invalid. However i want to always enable the submit button and on the server in the function to check if the form is invalid and to pop an alert to the user that the submit is interrupted because we have invalid data. When applying class binding i can "form.$invalid", but if i remove it in order to allow invalid submit then in the function if (form.$invalid) is undefined. How to check in the controller if i have invalid inputs in the form? I can loop through the elements and check for ng-invalid css class but this is the most dumiest think so please suggest a smart solution.
All errors of your form are set to the $scope.formName.$error object. I just inspected the properties set to this object using Chrome's developer tools and found that this object holds all the validation errors in different arrays based on error types. The screenshot below will give you a better idea:
The sample code using which I inspected this is available on jsfiddle
You need to loop through these properties and build the error message you wish to show on the pop-up.

Email validation for a ValidationTextBox in dojo?

I'm working with dojo1.7 and here i'm looking for a regex that will validate an Email address and here i'm using the widget dijit.form.ValidationTextBox.I've googled enough,but found nothing.
Here is the code and i left the regExp property empty.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Email Validation</title>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7/dijit/themes/claro/claro.css">
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7/dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: true"></script>
<script>
require(["dojo/parser", "dijit/form/ValidationTextBox"]);
</script>
</head>
<body class="claro">
<label for="email">Enter your Email Address:</label>
<input type="text" name="email" value=""
data-dojo-type="dijit.form.ValidationTextBox"
data-dojo-props="regExp:'', required:true, invalidMessage:'Invalid Email Address.'">
</body>
</html>
Please someone help me to find the regular expression.!
If you want to validate optional email address just use the following JavaScript code.
dijit.byId("newuser_email2").validator = function(value, constraints){
if(value == ''){
return true;
}
return dojox.validate.isEmailAddress(value, constraints);
}
Remember to replace your input id in my case I'm using newuser_email2.
dojox.validate.regexp has some regexes for common data including email
regExp: dojox.validate.regexp.emailAddress
var emailField = new ValidationTextBox({
required: true,
validator: validateWeb.isEmailAddress
}, "emailField");

Cannot retrieve money attribute using REST javascript

I'm tweaking the REST sample located here for my custom entity http://msdn.microsoft.com/en-us/library/hh223541.aspx
It retrieves and displays the table for all attributes except money. That is, if my requested attributes don't include an attribute of type money the table displays. Once I add a money attribute nothing is displayed. Below is my custom html. I'm using the same SDK.OptionSetSample.js included in the sample vs solution.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Contacts Page</title>
<script src="../../ClientGlobalContext.js.aspx" type="text/javascript"></script>
<script src="Scripts/json2.js" type="text/javascript"></script>
<script src="Scripts/SDK.OptionSetSample.js" type="text/javascript"></script>
<script src="Scripts/SDK.MetaData.js" type="text/javascript"></script>
<script src="Scripts/SDK.REST.js" type="text/javascript"></script>
<link href="Styles/OptionSetSample.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var attributes = [
"new_revenuesportspartnershipsId",
"new_name",
"new_PledgeorCash",
"new_Designation",
"new_DonorStatus"
, "new_FY2011"
];
var ContactListTableData = {
Id: "ContactList",
BodyId: "ContactListBody",
CheckboxColumn: true,
SearchFieldId: "SearchString",
CreateButtonId: "createContact",
DeleteButtonId: "deleteSelectedRecords",
Columns: [
{ Name: "new_name" },
{ Name: "new_PledgeorCash" },
{ Name: "new_Designation" },
{ Name: "new_DonorStatus" }
,{ Name: "new_FY2011" }
]
};
var CurrentContactForm = {
Id: "CurrentContact",
SaveButtonId: "SaveCurrentContact",
CloseFormControlId: "closeFormSpan"
};
window.onload = function () {
SDK.OptionSetSample.Entity = "new_revenuesportspartnerships";
SDK.OptionSetSample.Columnset = attributes;
SDK.OptionSetSample.PrimaryIdAttribute = "new_revenuesportspartnershipsId";
SDK.OptionSetSample.TextSearchAttribute = "new_name";
SDK.OptionSetSample.PrimaryAttribute = "new_name";
SDK.OptionSetSample.TableData = ContactListTableData,
SDK.OptionSetSample.FormData = CurrentContactForm;
//Get the Attribute metadata
SDK.OptionSetSample.getAttributeMetadataCollection.Execute();
}
</script>
</head>
<body>
<ul id="message">
</ul>
<div>
<button id="createContact">
Create</button>
<button id="deleteSelectedRecords" disabled="disabled">
Delete Selected Contacts</button>
<span id="searchBy">Search by Full Name :</span><input id="SearchString" type="text" />
<table id="ContactList" class="RecordList" />
</div>
<div id="CurrentContact" class="editForm">
<span id="closeFormSpan" class="closeFormSpan">X</span>
<!-- Only Boolean, Picklist, Status, and String attribute types are supported in this sample.-->
<div id="new_nameField">
</div>
<div id="new_PledgeorCashField">
</div>
<button id="SaveCurrentContact" disabled="disabled">
Save</button>
</div>
</body>
</html>
The sample script looks like this for Money as it has a case already:
case "Money":
case "Integer":
var Value = record[AttributeMetadata.SchemaName];
record[AttributeMetadata.SchemaName] = {};
record[AttributeMetadata.SchemaName].Value = Value;
record[AttributeMetadata.SchemaName].isDirty = false;
In the two cases outlined, Integer will work fine as it is a primitive type and so will return the actual numerical value into record[AttributeMetadata.SchemaName].Value
However the money type is a complex object so that is assigned to the same variable but wont actually give you the value it represents just the object which is why it isn't displaying. You actually need a further .value on the end to retrieve the numerical value it represents.
Either change the switch to this:
case "Integer":
var Value = record[AttributeMetadata.SchemaName];
record[AttributeMetadata.SchemaName] = {};
record[AttributeMetadata.SchemaName].Value = Value;
record[AttributeMetadata.SchemaName].isDirty = false;
case "Money":
var Value = record[AttributeMetadata.SchemaName];
record[AttributeMetadata.SchemaName] = {};
record[AttributeMetadata.SchemaName].Value = Value.value;
record[AttributeMetadata.SchemaName].isDirty = false;
or when you put the money attribute in your table make sure that the value that gets shown is record[AttributeMetadata.SchemaName].Value.value
I think its a lower case for value it might be upper Value
Hope that makes sense.

Resources