Develop Reference

How to set up a specific reject message for a HTML number input element?

I have a loop of html forms <input type="number">, which are basically simple algebra calculations for certain people to fill in. I set the correct answer by limiting both the max and min accepted number to the same number. However, in this way, if the participant gives a wrong answer, the reject message would be something like this: "values must be greater than or equal to ...". It is technically correct but I would like it to only say "incorrect answer, please try again".
Is there any way to do this?
Tried to use something like alert =, but it doesn't meet my requirements.
There's ${parameters.numbers} and ${parameters.answers} in the code because I am using lab.js for the looping. They just mean every time the number in the equation and the answer would change. For example, for the first loop ${parameters.numbers} is 200, and the corresponding answer ${parameters.answers} is 194. lab.js would take care of converting these two parameters to actual numbers for each loop of the form.
<form>
<label for="algebra">${parameters.numbers} - 6 = ?</label><br>
<input name="algebra" type="number" id="algebra" required="" max="${parameters.answers}" min="${parameters.answers}"><br>
<button type="submit">OK</button>
</form>
I try to avoid a dramatic alert dialogue for this, just a non-intrusive message like the default style would be good. If you want to recreate the default "values must be greater than or equal to ..." message, just replace the parameters like this would be good:
<form>
<label for="algebra">200 - 6 = ?</label><br>
<input name="algebra" type="number" id="algebra" required="" max="194" min="194"><br>
<button type="submit">OK</button>
</form>

I agree with #ElroyJetson that putting the answer inside the tag is not a good idea, but I focused this answer on the way you can set and unset the error message.
I used jQuery, but this can also be done with plain javascript.
The idea is to group the input tag with a span tag (here inside the div with class input-field).
When the value changes or when the form is submitted (in this case when the value changes), you remove any previous error message from the span tag, and then perform the validation. If there is an error you set it in the span tag.
In this way the error message will show below the input element.
To try it fill in an answer and click outside of the input box.
$(document).ready(function(){
$(".input-field").change(function(){
let $inputField = $(this);
let $input = $inputField.find("input");
let $errorMsg = $inputField.find("span.err-msg");
let max = Number($input.data("max"));
let min = Number($input.data("min"));
$errorMsg.text("");
let v = Number($input.val());
if(v < min || v > max){
$errorMsg.text("Invalid answer");
}
});
});
.err-msg{
color:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<div class="input-field">
<label for="algebra">200 - 6 = ?</label><br>
<input name="algebra" type="number" id="algebra" required="" data-max="194" data-min="194"><br>
<span class="err-msg"></span>
</div>
</form>

Don't set the correct answer with min & max. Instead, just call a javascript function by giving your button tag an onClick to evaluate if the user's answer is correct.
<button onclick="evaluateAnswer('.algebra');" class="submitBtn" >OK</button>
Then your javascript should look something like this:
function evaluateAnswer(cssClass){
var usersAnswer = $(cssClass).val();
var actualCorrectAnswer = 100;
if(usersAnswer == actualCorrectAnswer){
//Do something to proceed
}else{
alert('Sorry, your answer is incorrect');
}
}
Also, I just noticed that you did not want to alert as-in a javascript alert. What you could do is style your message and give it a css class that has the property display:none. Then when you want to show the message when user enters the wrong answer, you can use javascript to remove the class, and also use javascript to add the class back when user enters correct answer.
Edit
You should maybe store your correct answers in a database, evaluate it's correctness serverside, and use Ajax to display the message to prevent users from being able to right-click -> view source and look at the answers in your client-side code

My current solution is like this. There is invisible html elements which stores the correct answer, and the js script validates if the input is correct. Again, the ${} parts represents variables that change in each loop.
html part
<main class="content-horizontal-center content-vertical-center">
<form name="mathEvaluation">
<label for="algebra">${parameters.numbers} - 6 = ?</label><br>
<input name="answer" type="number" id="answer" required="" size="3"><br>
<button type="submit">OK</button>
<input type="hidden" id="hidenAnswer" value=${parameters.answers} />
</form>
</main>
js part
this.options.validator = function(data) {
if(mathEvaluation.answer.value == mathEvaluation.hidenAnswer.value){
return true
} else {
alert("Please enter the correct number.")
}
}

two way data binding with Angular 1

Basically what my problem is that I have a input field and text area like so:
<input type="text" placeholder="Your URL*" id="userURL" ng-model = "usermodel"/><br />
<textarea id="final">{{usermodel}}</textarea><br />
So my problem is that text will be manipulated via controller, and I want the user to be able to type into the field WITHOUT the textarea refreshing.
For example:
controller: {
textareaoutoutput = "hi ..... How are you";}
textarea: hi {{usermodel}} how are you? <br>
input field: john
BUT when I type into the field, "Hi how are you" gets removed, and only the text field input is shown. I would like it so that the "Hi how are you" is fixed and will not change while the user can enter and still see it add instantly.
I hope that makes sense

inside controller :
$scope.textVal = " hi "+ $scope.usermodel + " how are you?"
<textarea id="final">{{textVal}}</textarea><br />
I hope you can understand it always try to function for the manipulate string
or
<textarea id="final">Hi {{usermodel}} how are you!</textarea><br />

hm, I am not sure if this will work.
the controller is going to output text to the text area, but I want the angular expression tags {{x}} to be in the middle of the the document will be outputting
Maybe this example will be better
textarea:
TEXTA + {{angular expression}} + TEXTB
is it possible to output data to text a and text b and have a user still add something to the {{x}} without refreshing the textarea

How to get input data from text box in angularJS

I have this piece of HTML(JSP) code to input phone number !! on which JQuery has been applied to check the validity of input text by user.
<input type="text" maxlength="20" value="" id="phone" autocomplete="off" name="mobileNumberField" class="a-input-text a-width-medium a-spacing-small textbox" data-ng-model="mobile_number.value " data-ng-required="true" required="required" placeholder="mobile_number.value_def">
So suppose text in input box is +91 9056 6783 32
when i print data in controller using $scope.mobile_number.value
sometimes i get output like :
undefined or
+91 or
+91 9056
i don't get complete input text !!
How to i get complete input text in controller??

In Controller you can first declare an object
$scope.mobile_number={}
mainApp.controller('testApp', function($scope) {
$scope.mobile_number={};
$scope.mobile_number.value ="";
$scope.$watch('mobile_number.value', function() {
// do something here
console.log($scope.mobile_number.value);
});
});

Try to store your number as long datatype, rather than using a string.
To correctly display phone numbers in human-readable format, make use of angular-input-masks. The project is under MIT license. So feel free to modify the format to your liking.
Plunker is here: http://plnkr.co/edit/p3yFhsNwRO0v4kC915xF?p=preview
Dependency inject ui.utils.masks to your project.
Javscript:
var app = angular.module("app", ['ui.utils.masks']);
HTML:
<input ui-us-phone-number type="text" ng-model="myPhoneNumber" />

i tried the similar code but didnot get any issue .I am getting the complete number in controller.

Copy sevaral text input values into a single textarea

Im working for a school project and Im stuck and I was not able to find a script snippet or an answer to my problem in google.
After uploading an image the script shows the thumbnail and the link to that image inside a text field.
<input type="text" id="imlink" name="imlink" onclick="s(this);" size="70" value="'.SURL.''.$imagesfolder.'/' . $bigboy . '">
My problem is that when I upload 10 images it takes too much time to copy each field, so what I want to do is to show the "value" of all those 10 text inputs into one single textarea.
<textarea>
my_image1.jpg
my_image2.jpg
my_image3.jpg
my_image4.jpg
my_image5.jpg
</textarea>
Is there any solution for my problem ?
thanks in advance !

The .value property can be used to extract the values for each <input /> field. These values can then be inserted into the <textarea />:
var values = "";
$("input").each(function(i) {
values += (i > 0 ? "\n" : "") + this.value;
});
$("textarea").val(values);
Demo.
(This can be wrapped in a function and attached as a "change event handler" on the <input /> elements.)

Handling default form values with jquery.validationEngine.js

I am using jquery.validationEngine.js for form validation .
I was downloaded this js from http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/
this site.But it not works for checking validation for default value such as I have first name field whose value is "First Name".I want validation for checking that this field should not be blank but it not works because it contains default value "First Name".
Also I want this should work in jquery.validationEngine.js file because I have to many validations on form & I am using this js.
My field is
<input type="text" id="Uname" name="Uname" value="User Name" onfocus="if(this.value=='User Name')this.value='';" onblur="if(this.value=='')this.value='User Name';" />
If anyone using this file let me know & help to solve this problem.

If you wish to use validationEngine to validate your form the way you describe, there appear to be at least three solutions based on the documentation.
1) You can create a new custom regex in the translation file for each default text value, and then add that custom regex to the relevant form item. This is probably the trickiest of your options, as you will need to use a negative lookahead or something similar to get the regex correct.
2) Have the validator call one or more functions that you write to handle your special cases. I don't know if validationEngine allows you to pass parameters to the function--the documentation says nothing about that--so I'd guess it doesn't. This may mean that you will need to either write a separate function for each default value or else use a global variable to indicate the default value you are checking for. A function for your Uname field in your code snippet might look like this:
function checkUname(field, rules, i, options){
if (field.val() == "User Name") {
return "You must type in your username.";
}
Once that function is defined, you can use something like this to use it:
<input type="text" class="form validate[required,funcCall[checkUname]]" id="Uname" name="Uname" value="User Name" onfocus="if(this.value=='User Name')this.value='';" onblur="if(this.value=='')this.value='User Name';" />
3) You can write a single JavaScript function that goes through each field in your form and, if it finds the default value, changes it to an empty string. Then attach that function to the onsubmit event in your form. This may be the easiest option, but it depends on your function running before the validationEngine code. If that's not the case, then it won't work.

Here is a good example
How do you validate optional fields with default value?
Otherwise see the question I posted as identical question with the possible change
jQuery.validator.addMethod("defaultInvalid", function(value, element) {
if (element.value == element.defaultValue) return false;
}
instead of the switch/case
<input type="text" id="Uname" name="Uname" value="User Name" onfocus="if(this.value==this.defaultValue) this.value=''"
onblur="if(this.value=='') this.value=this.defaultValue" />

You should set the placeholder value using the HTML5 placeholder attribute instead of JavaScript.