::-webkit-validation-bubble-message {
display: none;
}
'
<form>
<input type="text" name="" required="">
<input class="button" type="submit" name="submit" value="Submit">
</form>
How to remove validation-bubble-message in form validation, I have used
::-webkit-validation-bubble-message {
display: none;
}
But it is not working. And request to without using novalidate attribute.
form novalidate="novalidate">
...
form>
and need to used
input required="required"
How to solve this?
You can do it with Javascript like so
Reference: here
document.addEventListener('invalid', (function () {
return function (e) {
e.preventDefault();
document.getElementById("fname").focus();
};
})(), true);
<form action="/action_page.php" method="post">
<input type="text" id="fname" name="fname" required>
<input type="submit" value="Submit">
</form>
Related
I've got an file-input which is submitted with a submit button. But theres also a delete button in the same form. So my problem is, when i press the delete button it will say "Please select an file" because the "required" attribute is in the file-input. I want that this message only displays when you press the upload button(of course only if the input is empty).
Here's my Code :
<form>
<input name="file" id="file" type="file" required>
<input type="submit" name="sub_image" value="Upload">
<input type="submit" name="del_image" value="Delete">
</form>
You could use formnovalidate attribute to skip validation on specific submit button:
<form>
<input name="file" id="file" type="file" required>
<input type="submit" name="sub_image" value="Upload">
<input type="submit" name="del_image" value="Delete" formnovalidate >
</form>
(function ($) {
$('#my-form').validate({
rules: {},
messages: {},
submitHandler: function () {
return false
}
});
$('#del_image').click(function(){
$("#file").val("");
});
})(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script>
<form id="my-form">
<input name="file" id="file" type="file" required>
<input type="submit" name="sub_image" value="Upload">
<button id="del_image">Delete</button>
</form>
I have 2 forms, one of which is to submit the user data ( 1st form ) and another to upload a file ( 2nd form. I cannot make it as a single form. My design is that way). First I want user to enter the basic information and then before hitting the submit button, I want that user to upload image and then hit the submit button. How can I make submit button of the 1st form to come after the 2nd form.
<form action="" method="post">
<label>First name</label>
<input type="text" name="firstname">
<input type="submit" style="position:relative; top:120px; left:90%;" value="submit"> <!-- This button should come after 2nd form upload button -->
<form action="" method="post" enctype="multipart/form-data">
<label>Upload a file:</label>
<input type="file" name="pic" value=""><br>
<input class="rel left30" type="submit" value="Upload">
</form>
I have used CSS it changed the position though but I encountered my vertical scroll bar cut to half, making bottom half totally invisible.
If you add a wrapper, you can better control its position using the wrappers boundaries and absolute positioning.
1) Below
The wrapper's padding-bottom: 25px is for the absolute positioned input to not overlap any elements that comes after the forms
.formswrapper {
position: relative;
padding-bottom: 25px;
/* style for this demo only */
border: 1px solid lightgray;
}
.formswrapper form:first-child input:last-child {
position: absolute;
left: 0;
top: 100%;
transform: translateY(-100%);
}
<div class="formswrapper">
<form action="" method="post">
<label>First name</label>
<input type="text" name="firstname">
<input type="submit" value="submit">
</form>
<form action="" method="post" enctype="multipart/form-data">
<label>Upload a file:</label>
<input type="file" name="pic" value=""><br>
<input class="rel left30" type="submit" value="Upload">
</form>
</div>
2) Beside
.formswrapper {
position: relative;
}
.formswrapper form:first-child input:last-child {
position: absolute;
left: 60px;
top: 100%;
transform: translateY(-100%);
}
<div class="formswrapper">
<form action="" method="post">
<label>First name</label>
<input type="text" name="firstname">
<input type="submit" value="Submit">
</form>
<form action="" method="post" enctype="multipart/form-data">
<label>Upload a file:</label>
<input type="file" name="pic" value=""><br>
<input class="rel left30" type="submit" value="Upload">
</form>
</div>
If you can use jQuery, I would do the following:
CSS:
#button1 { display:none; }
jQuery:
$(document).on("click", "#button2", function() {
$("#button1").css("display", "inline-block");
)}
This one should work:
$('#userData').bind('keyup change', function(){
var show = true;
for(child in $(this).children){
if(child.is(':empty')){
show = false; //Could break here if you want.
}
}
if(show){
$('#upload').show();
} else {
$('#upload').hide();
}
});
#upload{display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="userData" action="" method="post">
<label>First name</label>
<input type="text" name="firstname">
<input type="submit" style="position:relative; top:120px; left:90%;" value="submit">
</form>
<form id="upload" action="" method="post" enctype="multipart/form-data">
<label>Upload a file:</label>
<input type="file" name="pic" value=""><br>
<input class="rel left30" type="submit" value="Upload">
</form>
How do I send the contents of the form with out sending the contents of my other form on the same page? For example
<form class="form" method="get" action="page.php">
<input type="text" value="hi" name="forminput1">
<input type="submit" value="send">
</form>
<form class="form" method="get" action="page.php">
<input type="text" value="byebye" name="forminput2">
<input type="submit" value="send">
</form>
page.php:
if (isset($_GET['forminput1'])) {
//some code
}
if (isset($_GET['forminput2'])) {
//some code
}
Whenever I submit form #2, I end up submitting form #1.
You have not given any of your inputs a name attribute. Without a name="somename" attribute the browser will not pass anything back on the GET or POST.
If you add a name attribute like this
<form class="form" action="page.php">
<input type="text" value="hi" name="data">
<input type="submit" value="send" name="send">
</form>
<form class="form" action="page.php">
<input type="text" value="byebye" name="data">
<input type="submit" value="send" name="send">
</form>
It will suddenly start to work as you expect.
If you want to make both forms unique you can add a different name to the submit buttons.
<form class="form" action="page.php">
<input type="text" value="hi" name="data">
<input type="submit" value="send" name="send_form1">
</form>
<form class="form" action="page.php">
<input type="text" value="byebye" name="data">
<input type="submit" value="send" name="send_form2">
</form>
and then in your PHP, you will be able to differentiate between which form (button) is being submitted like this
<?php
if ( $_SERVER['REQUEST_METHOD'] == 'GET' && isset($_GET['send_form1'])) {
// User sent form1
}
if ( $_SERVER['REQUEST_METHOD'] == 'GET' && isset($_GET['send_form2'])) {
// User sent form2
}
I think you are using the same action....Forms are independent
I'm trying to append the form action with what the user puts in the text box and having some problems, could someone help me out of this jam?
<form action="http://wfbscd13.cadence.com/cgi-bin/motd.cgi?msg=1&cmd=replace&text=" method="get">
<label for="mestext1"></label>
<input type="text" size="100" maxlength="80">
<input type="submit" name="button1" id="button1" value="Replace">
</form>
If, for some reason, you need your action to be hardcoded:
<form id="myForm" action="http://wfbscd13.cadence.com/cgi-bin/motd.cgi?msg=1&cmd=replace&text=" method="get">
<label for="mestext1"></label>
<input type="text" id="mestext1" size="100" maxlength="80">
<input type="button" name="button1" id="button1" value="Replace" onclick="submitForm();">
</form>
<script type="text/javascript">
function submitForm()
{
var myForm = document.getElementById("myForm");
myForm.action = myForm.action + document.getElementById("mestext1").value;
myForm.submit();
}
</script>
This is not the right way to do it though. You should be adding inputs named msg and cmd and hide them if needed. Then your code will look like this:
<form id="myForm" action="http://wfbscd13.cadence.com/cgi-bin/motd.cgi" method="get">
<label for="mestext1"></label>
<input type="hidden" name="msg" value="1">
<input type="hidden" name="cmd" value="replace">
<input type="text" name="mestext1" id="mestext1" size="100" maxlength="80">
<input type="submit" name="button1" id="button1" value="Replace">
</form>
I have 2 forms on my website, rather than submit these, i want that user should simply be redirected to a new signup page (lets call it http://signup.com) when he tries to submit the form.
Code is below -- how would I achieve this?
Thanks
FK
FORM 1
<form action="" class="header-signup">
<input name="email" class="input-side" type="email" placeholder="Sign up now">
<input type="submit" value="Go" class="btn-side">
</form>
FORM 2
<form action="" class="signup-form">
<input name="email" class="input-side animate-on-scroll" data-scrollanimation="fadeInLeft" type="email" placeholder="Your email address">
<input type="submit" value="Sign Up Now" class="btn-side animate-on-scroll" data-scrollanimation="fadeInRight">
</form>
Try:
<form action="" class="header-signup">
<input name="email" id="txt-email" class="input-side" type="email" placeholder="Sign up now">
<input type="button" value="Go" id="btn-go" class="btn-side">
</form>
<script>
function moveToSignUpLocation() {
window.location = "[location to sign up]";
}
document.getElementById('txt-email').onkeydown = function(e) {
e = e || window.event;
if (e.keyCode === 13) {
moveToSignUpLocation();
}
}
document.getElementById('btn-go').onclick = function() {
moveToSignUpLocation();
};
</script>