I use Bootstrap 4.5, where it is possible to check the filling of the form, for example by inserting required.
<input type="text" class="form-control" name="name_1" required>
How can I please check where I need to have input #1 OR input #2 filled in?
<input type="text" class="form-control" name="name_1">
<input type="text" class="form-control" name="name_2">
if you want to check whether the input#1 OR input#2 is filled. I recommend you to write a piece of javascript code to check that. if you are familiar with java script, create a separate javascript file and write a function to validate. or else you can just put a script tag inside the head tag as follows.
Javascript Validation:
<head>
<script>
function validateForm(){
if(document.myform.input1.value == "" || document.myform.input2.value == ""){
alert("Both input1 and input2 should not be empty!");
}
}
</script>
</head>
HTML form:
<form name="myform" method="post" onsubmit="validateForm()" >
Input1: <input type="text" name="input1"><br/>
Input2: <input type="text" name="input2"><br/>
<input type="submit">
</form>
I'm making a form. And on one input tag is an OnClick event handler, which is opening a popup, where you can choose some stuff, and then it autofills the input tag.
That input tag is also readonly, so only right data will be entered.
This is the code of the input tag:
<input type="text" name="formAfterRederict" id="formAfterRederict" size="50" required readonly="readonly" OnClick="choose_le_page();" />
But the required attribute isn't working in Chrome. But the field is required.
Does anybody know how I can make it work?
I had same requirement as yours and I figured out an easy way to do this.
If you want a "readonly" field to be "required" also (which is not supported by basic HTML), and you feel too lazy to add custom validation, then just make the field read only using jQuery this way:
IMPROVED
form the suggestions in comments
<input type="text" class="readonly" autocomplete="off" required />
<script>
$(".readonly").on('keydown paste focus mousedown', function(e){
if(e.keyCode != 9) // ignore tab
e.preventDefault();
});
</script>
Credits: #Ed Bayiates, #Anton Shchyrov, #appel, #Edhrendal, #Peter Lenjo
ORIGINAL
<input type="text" class="readonly" required />
<script>
$(".readonly").keydown(function(e){
e.preventDefault();
});
</script>
readonly fields cannot have the required attribute, as it's generally assumed that they will already hold some value.
Remove readonly and use function
<input type="text" name="name" id="id" required onkeypress="return false;" />
It works as you want.
Required and readonly don't work together.
But readonly can be replaced with following construction:
<input type="text"
onkeydown="return false;"
style="caret-color: transparent !important;"
required>
1) onkeydown will stop manipulation with data
2) style="caret-color: transparent !important;" will hide cursor.
3) you can add style="pointer-events: none;" if you don't have any events on your input, but it was not my case, because I used a Month Picker. My Month picker is showing a dialog on click.
This is by design. According to the official HTML5 standard drafts, "if the readonly attribute is specified on an input element, the element is barred from constraint validation." (E.g. its values won't be checked.)
Yes, there is a workaround for this issue. I found it from https://codepen.io/fxm90/pen/zGogwV site.
Solution is as follows.
HTML File
<form>
<input type="text" value="" required data-readonly />
<input type="submit" value="Submit" />
</form>
CSS File
input[data-readonly] {
pointer-events: none;
}
If anyone wants to do it only from html, This works for me.
<input type="text" onkeydown="event.preventDefault()" required />
I think this should help.
<form onSubmit="return checkIfInputHasVal()">
<input type="text" name="formAfterRederict" id="formAfterRederict" size="50" required readonly="readonly" OnClick="choose_le_page();" />
</form>
<script>
function checkIfInputHasVal(){
if($("#formAfterRederict").val==""){
alert("formAfterRederict should have a value");
return false;
}
}
</script>
You can do this for your template:
<input required onfocus="unselect($event)" class="disabled">
And this for your js:
unselect(event){
event.preventDefault();
event.currentTarget.blur();
}
For a user the input will be disabled and required at the same time, providing you have a css-class for disabled input.
Based on answer #KanakSinghal but without blocked all keys and with blocked cut event
$('.readonly').keydown(function(e) {
if (e.keyCode === 8 || e.keyCode === 46) // Backspace & del
e.preventDefault();
}).on('keypress paste cut', function(e) {
e.preventDefault();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="readonly" value="test" />
P.S. Somebody knows as cut event translate to copy event?
Required and readonly don't work together.
Although you can make two inputs like this:
<input id="One" readonly />
<input id="Two" required style="display: none" /> //invisible
And change the value Two to the value that´s inside the input One.
I have the same problem, and finally I use this solution (with jQuery):
form.find(':input[required][readonly]').filter(function(){ return this.value === '';})
In addition to the form.checkValidity(), I test the length of the above search somehow this way:
let fcnt = $(form)
.find(':input[required][readonly]')
.filter(function() { return this.value === '';})
.length;
if (form.checkValidity() && !fcnt) {
form.submit();
}
function validateForm() {
var x = document.forms["myForm"]["test2"].value;
if (x == "") {
alert("Name missing!!");
return false;
}
}
<form class="form-horizontal" onsubmit="return validateForm()" name="myForm" action="" method="POST">
<input type="text" name="test1">
<input type="text" disabled name="test2">
<button type="submit">Submit</button>
</form>
I have a external js file that has the following function in it. It is supped to be called by the forms onsubmit but it doesn't appear to be happening. The form is just submitted without validation. At one point this was working but now it is not. Where am I going wrong? Any help is appreciated.
function validateDelete(form)
{
alert("Validation Started!");
var photoName=form.deleteName;
if (photoName === "")
{
alert("Photo Name Required");
return false;
}
}
<script src="galleryScripts/validation.js" type="text/javascript" ></script>
<form action="galleryScripts/deletePhoto.php?submit=true" name="deleteForm" onsubmit="return validateDelete(this);" id="deleteForm" method="post">
<label>
File Name: <input name="deleteName" type="text" id="deleteName">
</label>
<label>
<input type="submit" name="deleteButton" id="deleteButton" value="Delete" />
</label>
</form>
Make sure that your js is included.
For example under mozilla press CTRL+U and click on a link to your validation.js file.
Also you can just paste in tag in your tag it should work.
So what I have is a simple search form and submit button. What I want to do is validate the input to determine whether or not an "=" was included in the search query, if so then I want it to send the input string (que) to vert.php. If not then I would like it to send to search.php.
<script type="text/javascript" language="JavaScript">
function chgact()
{
if(document.myform.que.indexOf(=) == true) {
document.myform.action = '/vert.php';
}
return true;
}
</script>
<h1>Keyword search</h1>
<form name="myform" method="post" action="/search.php" onSubmit="return chgact()">
Keywords: <br/>
<input type="text" name="que" id="que" / >
<p/>
Items to display: <br/>
<select name="i">
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
</select>
<p/>
<input type="submit" name="submit" value="Search"/>
</form>
Any help at all would be so grealty appreciated! :)
Change line 4 to if (document.myform.que.value.indexOf('=') != -1) {
You need to get the value of que, you need to enquote the equals sign (you're searching for the character '='), and the indexOf function returns either -1 if not found or the position of the first occurrence, which is an integer. It does not return a boolean value.
Here is the updated code:
<script type="text/javascript" language="JavaScript">
function chgact()
{
if(document.myform.que.value.indexOf('=') != -1) {
document.myform.action = '/vert.php';
}
return true;
}
</script>
<h1>Keyword search</h1>
<form name="myform" method="post" action="/search.php" onSubmit="return chgact()">
Keywords: <br/>
<input type="text" name="que" id="que" / >
<p/>
Items to display: <br/>
<select name="i">
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
</select>
<p/>
<input type="submit" name="submit" value="Search"/>
</form>
I would suggest you perform this action with PHP. If your site visitor has JavaScript turned off, they won't get the benefit of your logic. I suggest you look at strpbrk() function to detect the "=" char.
I have 1 main search form with a submit button and several secondary search forms with submit buttons.
What I would like to do is when I enter text and click on the submit button of the main search form, the same text gets copied in all of the secondary search forms and all the submit buttons of the secondary search forms get automatically hit.
The HTML code for the mains earch form is shown below:
<form action="query.php" method="get">
Search: <input type="text" name="item" size="30">
<input type="submit" value="send">
</form>
One of the several secondary search forms is shown below:
<FORM action="http://www.dpbolvw.net/interactive" method="GET" target="_blank">
<div style="float: left; padding: 0 3px 0 0;">
<INPUT type="text" name="src" size="9"
value="<?php
$input = $_GET['item'];
echo $input;?>" style="width: 110px; height: 22px;margin:0; padding: 0; font-size:140%;">
</div>
<div style="float: left; padding: 0 3px 0 0;">
<input type="image" name="submit" value="GO" src="http://images.guitarcenter.com/Content/GC/banner/go.gif"
alt="Search" style="font-size:140%">
/div>
<input type="hidden" name="aid" value="1234"/>
<input type="hidden" name="pid" value="1234"/>
<input type="hidden" name="url" value="http://www.guitarcenter.com/Search/Default.aspx"/>
</form>
Notice the php code that I put in the "value" field of the secondary search form:
<?php
$input = $_GET['item'];
echo $input;?>
This automatically copies the text that I entered in the main search form into the secondary search form. I thus figured out how to do that.
The problem is to "simulate" an "Enter" keystroke or a click on the "GO" button with the mouse on the secondary search form when the user hits the Enter key or hits the "SEND" button with the mouse on the main search form.
Thank you for your insight!
I'm not sure what the point of that would be, It looks like all of these are search forms all pointing to different sites. Web browsers won't allow that. They can navigate to one page at a time. When you post a form to a page you are navigating to that page. Therefore, you are trying to navigate to several pages at once. It's like trying to be in Paris and London at the same time. I don't see how your plan will work the way you're describing it.
That said, You can use client-side javascript to call
document.forms[0].submit();
so if you can come up with a plan that does not involve trying to have the user see all the different search results in one window, you could try this on your first form...
<form action="query.php" method="get" onSubmit="document.forms(1).Submit();">
You should use AJAX (JQuery) as Brandon Suggested. Read http://docs.jquery.com/Events/submit
Example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("#submit").click(function() {
//Do you stuff here like triggering other submits
//Like:
$("input#submit2").click();
$("input#submit3").click();
return false;
});
});
</script>
</head>
<body>
<form action="javascript:alert('success!');">
<div>
<input type="text" />
<input type="submit" id="submit" />
</div>
</form>
<form >
<div>
<input type="text" />
<input type="submit" id="submit2" />
</div>
</form>
<form >
<div>
<input type="text" />
<input type="submit" id="submit3" />
</div>
</form>
</body>
</html>
Take a look at the submit() event in jQuery. That is going to be your key.
I am assuming that you are planning on submitting via ajax? Otherwise it is futile.
So you could do something like this-
Give all of your forms a certain class, let's call it 'ajax_search_forms'. So now you can actually hook into the submit event.
$('.ajax_search_forms').submit(function(){
var search_string = $('input[name=src]').val();
$('.ajax_search_forms').each(function(){
$.ajax({
url : $(this).attr('action'),
data : 'search_string=' + search_string,
success : function(html){
// Do something with the result
}
});
});
// Return false is VERY important so that the form submission does not continue
return false;
});