In HTML5, when I make a text box like below, and press the submit button.
<input type='number' name ='search_size' id ='search_size' class="" value="" min="0" max="100" >
When the value doesn't meet the min, max value, it will not proceed. However,
My button that handles the text box is made of JQuery. When I type nothing, and click, it processes it. When I type the value over 100, it also processes it. (There are other values from other tags and etc.)
Is there something I can add to JQuery so that it will check the condition or requirement in the text box?
I want to show the JQuery code here, but it is pretty long. Some of it looks like the below.
$("#search_submit").off("click").on("click", function(event_receiver){
$("#loading").css('z-index',-1);
$("#loading_search").css('top',$("#dialog_data_search").position().top + ($("#dialog_data_search").height()*0.7) );
$("#loading_search").show();
var search_data;
var request_obj = {
"baseDN" : $("#search_base_dn").val()
,"filter":$("#search_filter").val()
,"attribute":$("#search_attribute").val()
,"sortAsc":true
,"scope":$(":radio[name='search_scope']:checked").val()
,"size":$("#search_size").val()}; //<-- this guy!!
$.ajax({
url:"/browser/ajaxGetSearchData"
,dataType:"json"
,data:request_obj
,async:true
,type:"post"
,success:function(return_data){
if(return_data.success){
search_data = return_data.result;
}else{
alert(return_data.message);
}
}
you can add a validate function inside the jquery click function of yours. in that validate function the value of the input field must be validated. if it exceeds 100 it should return false
Instead of the <button>'s click event, you want to hook on the <form>'s submit one.
The click event will fire even though the form is invalid, while the submit one will first perform the validation:
document.getElementById('btn').onclick = e => console.log('btn has been clicked');
document.getElementById('form').onsubmit = e => console.log('form has been submitted');
<!-- an always invalid form... -->
<form id="form">
<input name="foo" maxlength="0" required>
<button id='btn'>bar</button>
</form>
Use validation bootstrap like this
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<form>
<div class="form-group">
<label for="number">Number</label>
<input type="number" class="form-control" name ='search_size' id ='search_size' value="0" min="0" max="100" required>
</div>
<button class="btn" type="submit">submit</button>
</form>
Related
<input type="number" class="setter" id="day-set" name="day-set" value="day"max="30" min="0" placeholder="00"onkeyup="if(parseInt(this.value)>30){ this.value =30; return false;}">
How do I make it so that the input typed in by the user in the input field is cleared when a submit button is pressed (the one which does not refreshes the page)
you can add this to the onclick function of your button and replace the myForm with the id of your form element
document.getElementById("myForm").reset();
<html>
<body>
<p>Clear the input field when you click on the button:</p>
<button onclick="document.getElementById('myInput').value = ''">Clear input
field</button>
<input type="text" value="Blabla" id="myInput">
</body>
</html>
You can also write the javaScript in-between the script tag in a Function or any other way that you want.
You can create a function and add it into the onSubmit event of your form (assuming that you have a form) and then inside of that function you only need to clear the value using something like this:
document.getElementById('day-set').value = ''
Example:
<form onsubmit="myFunction()">
<input type="number" class="setter" id="day-set" name="day-set" value="day"max="30" min="0" placeholder="00"onkeyup="if(parseInt(this.value)>30){ this.value =30; return false;}">
<input type="submit">
</form>
<script>
function myFunction(){
document.getElementById('day-set').value = ''
}
</script>
I want to get input from the user in a type="number" text box.
the limitation is a number between 1994-1998.
I currently have two buttons. One "submit" button and a second ("button") button that goes to the next screen.
I want to make the 2 buttons one.
Which means that as soon as I click the "Move to Next page" button, the input is also checked.
And you can move to the next screen only with proper input.
would much rather do it only with HTML and less with JavaScript if possible.
If there is no option then it is also possible with JavaScript.
function check () {
console.log('Checked!');
}
<div>
between 1994 and 1998: <input id="section5input" type="number" name="quantity" min="1994" max="1998">
<input type="submit">
Calculate the answers!
</div>
</div>
<div class="box" id="section6">
<h1>fin!</h1>
<div class="question-text">
<input style="padding: 20px;" type="button" class="btn" onclick="check();">check!!!
</div>
</div>
From what I understand you want to go to next page only if input is correct then check this out. I have created a form and placed your html inside it. Now the submit button will only work if check function return true.
function check(){
//return true, if correct
//return false, if incorrect
return true;
}
<form action='yourURLforNextPage' method="POST">
Between 1994 and 1998:
<input id="section5input" type="number" name="quantity" min="1994" max="1998">
<input type="submit" onclick="return check();">
</form>
function check(){
let val = document.getElementById("section5input");
if((val.value!= "" && null) && (val.value> 1994 && val.value<1998) ){
//code to render to next screen
}
}
I have three input fields I am attempting to enforce validity on. Currently, I have them all set as required, but removing the modifier with Javascript on submit if one of them is filled out; essentially, one must fill out at least one, but not none of these fields.
Here is an example of the fields:
jQuery(function ($) {
var $inputs = $('input[name=Input1],input[name=Input2], input[name=Input3]');
$inputs.on('input', function () {
// Set the required property of the other input to false if this input is not empty.
$inputs.not(this).prop('required', $(this).val().length > 0 && $(this).val() != 0)
});
});
jQuery(function ($) {
$("#Input1, #Input2").oninvalid = (function() {
$(this).setCustomValidity("Please enter a valid Input1, Input2, or Input3")
});
});
var Input3default = document.getElementById('Input3')
if (Input3.value.length == 0) Input3.value = "0";
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="input-group mb-3">
<form action="" method="get" autocomplete="off">
<div class="row" style="text-align:justify; width: 100%; display:inline">
<div class="">
<label for="text3">Input1:</label>
<input type="text" id="Input1" name="Input1" required oninvalid="this.setCustomValidity('Please enter a valid Input1, Input2, or Input3')" />
</div>
<div class="">
<label for="text4">Input2:</label>
<input type="text" id="Input2" name="Input2" required oninvalid="this.setCustomValidity('Please enter a valid Input1, Input2, or Input3')"/>
</div>
<div class="">
<label for="text5">Input3:</label>
<input type="text" id="Input3" name="Input3" required placeholder="0" pattern="[0-9]*" onsubmit="Input3default" oninvalid="this.setCustomValidity('Please enter a valid Input3')"/>
</div>
</div>
<p>
<input type="submit" value=" Submit " />
</p>
</form>
</div>
</div>
This seems to work fine if I leave it default; I have Input1 and Input2 empty by default, and Input3 has a value of "0" by default. If I enter Input1 or Input2, my submission goes through just fine. However, the problems begin if I alter Input3.
Problem 1: Any time I enter Inputs 1 and 2 but leave 3 blank, it triggers invalidity; my Input3default never seems to trigger, and it is passed blank and caught by the oninvalid tag.
Problem 2: Along with that, if I do not specify an Input2 along with my Input1 while Input3 is blank, it triggers invalidity on Input2. Using Chrome Debugger, I can see that the Required tag is removed, but my OnInvalid pop-up still comes up no matter what is remedied.
Essentially, I am trying to solve the second problem: When I remove the required html tag from my input, after invalidating another input with a Javascript-enforced default, my inputs refuse to validate on the front end.
I appreciate any advice and conjecture as to why this may be the case, and believe that the two problems are connected.
EDIT: Upon adding an = to my original oninvalid JQuery function, I removed a JS error. It appears that my Input3 default function triggers on pageload, but not on submit; I added an onsubmit function to input3, but am still receiving oninvalid events for input2.
I was able to fix this issue on my own, using the OnInput event.
The setCustomValidity function, when triggered, does not allow a submission while a CustomValidity is set. In order to fix this, I edited my inputs as so:
<input type="text" id="Input1" name="Input1" required oninvalid="this.setCustomValidity('Please enter a valid Input1, Input2, or Input3')" oninput="this.setCustomValidity('')"/>
I still have a few kinks to iron out, but this fixed my main problem in that the validity of an input was not being reset.
I'll leave this answer unaccepted at first to allow others to pitch in.
It only seems to work if the input type is in a form. Possible made a validation over javascript and not using the form tag?
Expected: if the text field is empty and i click submit it should come the message the the field is empty. Only submit if the field is field out
my script:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr><td><input type="text" size"30" placeholder="put id" id="source" required>
<button type="submit" class="formButton" id="submit">Submit</button></td></tr>
<tr><td><input type="text" style="border:none" size="40" id="target" class="form" onClick="myFunct()" required></td></tr>
<tr><td><input type="text" style="border:none" size="40" id="target" class="form21" onClick="myFunct()" required></td></tr>
<script>
$(".formButton").click(function() {
$(".form21").show();
});
</script>
<script>
$('#submit').click(function(){
var source = $('#source').val();
$('#target').val('text' + ' text');
});
</script>
What i tired, but seams not to work
<script>
function myFunct(){
if (document.getElementById('source').validity.valid) { alert('missing name'); return }
</script>
thank you for your help
$('#target').val('text + ' text'); , the quotes are not properly closed and there is no text variable.
So this should be $('#target').val('text' + source );
In myFunct , there is no closing brace for the function.
ID is unique for a page. So do not use same ID's for multiple elements. In this example , target is used twice.
Reg the element's validity, when the element is invalid, the valid property will be false. So for the alert message , the condition should be (!document.getElementById('source').validity.valid) (i.e) to check if the element is not valid .
Submit button's click handler does not invoke myFunct func. So with the current code , the validator function will be called when the input element's with class "form" and "form21" . If you want the validation to be done on submit click , the validation code should be present for the button submit click handler.
I would like to have a form (injected via ajax) that has multiple validations. Something like this:
<div data-form> <!-- Already on the page -->
<!-- Coming from API -->
<form>
<input type="number" data-input-decimal>
<input type="number" data-input-integer>
<input type="submit">
</form>
</div>
And this is my jQuery:
var $DATA_INPUT_DECIMAL = $('[data-input-decimal]');
var $DATA_INPUT_INTEGER = $('[data-input-integer]');
var $FORM = $('[data-form]');
$FORM.on('keydown', $DATA_INPUT_DECIMAL, function(e) {
console.log('banana');
// This is the validation for the input with decimal
}
$FORM.on('keydown', $DATA_INPUT_INTEGER, function(e) {
console.log('apple');
// This is the validation for the input with ONLY NUMBERS (0-9)
}
The weird part is when I test on the browser, both of these functions are being called when I keydown any of the inputs inside the form. How do I set up different validations properly in this situation?
Thanks in advance!
You need simple delegation:
$('[data-form]').on('keydown', 'input', function(e) {
if ($(this).is('[data-input-decimal]')) {
console.log('decimal');
} else if ($(this).is('[data-input-integer]')) {
console.log('integer');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div data-form>
<!-- Already on the page -->
<!-- Coming from API -->
<form>
<input type="number" data-input-decimal>
<input type="number" data-input-integer>
<input type="submit">
</form>
</div>