I write a login form but I can't make it correctly in validation with jQuery.
$(document).ready(function() {
$("#form1").validate({
rules: {
username: {
required: true,
minlength: 6
},
password: {
required: true,
minlength: 5
}
},
messages: {
username: {
required: "name is mandatory"
}
}
});
});
.error {
color: red;
}
p {
font-size: 13px;
font-style: arial;
font-align: left;
}
body {
font-family: calibri, arial, sans-serif;
background-color: powderblue;
margin: 0;
padding: 0;
border: 0;
outline: 0;
}
span.password {
float: right;
padding-top: 50px;
}
.login-form {
margin-top: 5%;
margin-bottom: 5%;
position: relative;
width: 390px;
left: 35%;
height: 500px;
border: 6px solid#ff0000;
padding: 10px;
background-color: #00ffff;
}
.login-form h1 {
font-size: 50px;
text-align: center;
text-transform: uppercase;
margin: 40px;
}
.login-form label {
font-size: 29px;
text-align: right margin:45px;
}
.login-form input[type=text],
.login-form input[type=password] {
font-size: 20px;
width: 350px;
padding: 10px;
border: 0;
outline: none;
border-radius: 5px;
}
.login-form button {
font-size: 16px;
color: white;
background-color: green;
font-weight: bold;
padding: 79px;
width: 60%;
margin: 10px 15px;
padding: 8px 6px;
border: 5px;
cursor: pointer;
}
.login-form button:hover {
border: solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="jquery-validation/dist/jquery.validate.min.js">
</script>
<script src="js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>
<div class="login-form">
<h1>LOGIN PAGE</h1>
<form action="#" name="form1" id="form1">
<label for="firstname">First Name</label>
<input type="text" name="firstname" id="firstname" placeholder="username"><br>
<br>
<label for="password">Password</label>
<input type="password" name="password" id="password" placeholder="pswd"><br>
<input name="submit" type="submit" id="submit" class="submit" value="Submit">
<span>
<input type="checkbox" id= "remember" name="remember " value="remember me">
<label for ="checkbox" name="checkbox" >Remember me</label>
</span>
<span class="password">Forget <a href="#" >Password ?</a></span>
</form>
</div>
For your use case, HTML5 validation attributes could be used to validate
In the HTML snippet below required, minlength, pattern and max validation attributes were used.
<form action="#" id="formOne" novalidate>
<div class="FormGroup">
<label for="name">Name</label>
<input
type="text"
class="FormGroup__Input"
name="username"
placeholder="username"
data-v-input
minlength="6"
required
/>
<span class="FormGroup__ErrorLabel"></span>
</div>
<div class="FormGroup">
<label for="password">Password</label>
<input
type="number"
name="password"
class="FormGroup__Input"
placeholder="password"
data-v-input
minlength="5"
required
/>
<span class="FormGroup__ErrorLabel"></span>
</div>
<button type="submit">Submit</button>
</form>
Steps to make this form work
put novalidate attribute on the form element to validate inputs using code (javascript).
Each input element should have a name attribute that should be unique to that input
Add data-v-input attribute to each input element you want to be considered for validation by the javascript.
Put your html5 validation rules on the input elements
To show errors, add an element just below the input element. NOTE: The error label should be the next sibling of the input field.
'use strict';
const formNode = document.querySelector("#formOne");
initValidation(formNode, (form, data) => {
alert(JSON.stringify(data, null, 4))
});
function initValidation(formNode, onSubmitHandler){
const validationErrors = [];
const inputs = formNode.querySelectorAll("[data-v-input]");
const selects = formNode.querySelectorAll("[data-v-select]");
formNode.addEventListener("submit", handleSubmit);
inputs.forEach(input => input.addEventListener("blur", handleBlur));
inputs.forEach(input => input.addEventListener("input", handleInput));
function handleSubmit(evt){
evt.preventDefault();
let formData = {};
if(inputs.length > 0){
inputs.forEach(input => {
validateInput(input);
formData[input.name] = input.value;
});
}
if(selects.length > 0){
selects.forEach(select => {
validateInput(select);
formData[select.name] = select.value;
});
}
if(validationErrors.length === 0){
formNode.reset();
onSubmitHandler(formNode, formData);
}
}
function handleBlur(evt){
validateInput(evt.target);
}
function handleInput(evt){
validateInput(evt.target);
}
function validateInput(inputNode){
if(inputNode.validity.valid){
let inputNodeIndex = validationErrors.indexOf(inputNode.name);
validationErrors.splice(inputNode, 1);
renderErrorLabel(inputNode, false);
} else {
validationErrors.push(inputNode.name);
renderErrorLabel(inputNode);
}
}
function renderErrorLabel(node, show = true){
node.nextElementSibling.textContent = show ? node.validationMessage : "";
}
return true;
}
Copy the initValidation function into your javascript file.
To validate your form, evoke initValidation after DOM loads. It takes two arguments.
a form node: a result of document.getElementById or any of the DOM selectors. However, initValidation takes one form node.
a callback that receives the form node as it's first argument and the form's data as the second argument. Whatever you want to do after validation is complete goes in the body of that callback. NOTE: The callback is only called when all validations were passed and there's no error.
I need to make HTML5 validation rule so:
10 characters
mix of letters and numbers
at least 1 letter
I try something like:
<input maxlength="200" type="text" name="serial" id="serial" required="required" class="form-control input-lg" pattern="[a-fA-F]{1,}[0-9]{10}" title="Wrong Code" placeholder="Security Code" />
but don't work.
You could use <input type="password" pattern="^[a-zA-Z][a-zA-Z0-9-_\.]{1,10}$" required>
Or this (it's a bit longer...):
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
input {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px
}
input[type=button] {
background-color: #4CAF50;
color: white
}
.container {
background-color: #f1f1f1;
padding: 20px
}
#message {
display: none;
position: relative;
margin-top: 10px
}
.valid {
display: none
}
</style>
</head>
<body>
<div class="container">
<form action="/db.php" id="form">
<label for="psw">Password</label>
<input type="password" id="psw" name="psw" required>
<input type="button" value="Submit" onclick="analyze()">
</form>
</div>
<div id="message">
<h3 id="theH3">Your password doesn't contain any of the following:</h3>
<p id="letter" class="invalid">A letter</p>
<p id="number" class="invalid">A number</p>
<p id="length" class="invalid">10 characters</p>
</div>
<script>
var myInput = document.getElementById("psw");
var letter = document.getElementById("letter");
var capital = document.getElementById("capital");
var number = document.getElementById("number");
var length = document.getElementById("length");
var tmp = 0;
myInput.onfocus = function () {
document.getElementById("message").style.display = "block";
}
myInput.onblur = function () {
document.getElementById("message").style.display = "none";
}
myInput.onkeyup = function () {
var lowerCaseLetters = /[a-zA-Z]/g;
if (myInput.value.match(lowerCaseLetters)) {
letter.classList.remove("invalid");
letter.classList.add("valid");
tmp++;
} else {
letter.classList.remove("valid");
letter.classList.add("invalid");
}
var numbers = /[0-9]/g;
if (myInput.value.match(numbers)) {
number.classList.remove("invalid");
number.classList.add("valid");
tmp++;
} else {
number.classList.remove("valid");
number.classList.add("invalid");
} if (myInput.value.length >= 10) {
length.classList.remove("invalid");
length.classList.add("valid");
tmp++;
} else {
length.classList.remove("valid");
length.classList.add("invalid");
}
}
function analyze() {
var lowerCaseLetters = /[a-zA-Z]/g;
var numbers = /[0-9]/g;
if (lowerCaseLetters.test(myInput.value) && numbers.test(myInput.value))document.getElementById('form').submit();
if(tmp==3){
var message = document.getElementById('theH3')
message.style('display:none;');
}
}
</script>
</body>
</html>
<input maxlength="200" type="text" name="serial" id="serial" required="required" class="form-control input-lg" pattern="^[a-zA-Z][a-zA-Z0-9-_\.]{1,10}$" title="Wrong Code" placeholder="Security Code" />
^[a-zA-Z][a-zA-Z0-9-_\.]{1,10}$
I think you are looking for this website.
URL : http://html5pattern.com/Names
I am a beginner, and I'm trying to display a div up to my radio button. I explain the problem inside my code. The autocomplete box displays after the ajax call.
<input type="text" name="search" id="search" autofocus autocomplete="off" />
<input type="submit" id="search_button" title="Check" value="Check"/>
//the suggesstion div move radio button to the right I need it up of the radio buttons !
<div id="suggesstion-box"></div>
<label>Search by :</label>
<input id="radio" name="radio" value="name" type="radio"/>
<span id="radio_text"> name</span>
<input id="radio" name="radio" value="age" type="radio">
<span id="radio_text"/>age</span>
ajax.js to fetch data
$(document).ready(function(){
$("#search").keyup(function(){
if ($("#search").val() == "")
$("#suggesstion-box").hide();
else{
$.ajax({
type: "GET",
url: "getinfo.php",
data:'keyword='+$(this).val(),
success: function(data){
console.log(data);
$("#suggesstion-box").show();
document.getElementById("suggesstion-box").innerHTML=data;
//$("#suggesstion-box").html("data");
$("#search").css("background","#FFF");
}
});
}//else box not empty
});
console.log("print it");
});
function select(val) {
$("#search").val(val);
$("#suggesstion-box").hide();
}
getinfo.php to print data to suggestion box
<?php
require_once("dbcontroller.php");
$db_handle = new DBController();
//include('database.php');
//Sanitize the POST values
$hint = $_GET['keyword'];
$i = 0;
$qry1 = "SELECT * FROM Journals where Journal_name like '" . $hint . "%' AND is_reported=1 LIMIT 3 ";
$qry2 = "SELECT * FROM Publishers where Publisher_Name like '" . $hint . "%' AND is_reported=1 LIMIT 2;";
//$result = mysql_query($qry1);
//$result2 = mysql_query($qry2);
$data = array();
$result2 = $db_handle->runQuery($qry2);
$result1 = $db_handle->runQuery($qry1);
if (!empty($result2)) {
?>
<ul id="country-list">
<?php
foreach ($result2 as $info2) {
?>
<li onClick="select('<?php echo $info2['Publisher_Name']; ?>');"><?php echo $info2['Publisher_Name']; ?></li>
<?php
} if (empty($result1)){
?>
</ul>
<?php } }
if (!empty($result1)) {
if (empty($result2)){
?>
<ul id="country-list">
<?php
}
foreach ($result1 as $info) {
?>
<li onClick="select('<?php echo $info['Journal_name']; ?>');"><?php echo $info['Journal_name']; ?></li>
<?php } ?>
</ul>
<?php
}
?>
s.css
#country-list{float:left;list-style:none;margin:0;padding:0;width:210px; display: inline;}
#country-list li{padding: 10px; background:#FAFAFA;border-bottom:#F0F0F0 1px solid;}
#country-list li:hover{background:#F0F0F0;}
#search {
width: 300px;
height: 10px;
border: thin solid #00B6A8;
margin-top: 10px;
font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
border-collapse: collapse;
-webkit-box-shadow: 0px 0px 2px;
box-shadow: 0px 0px 2px;
padding: 10px;
display: inline;
//border: #F0F0F0 1px solid;
}
#suggesstion-box {
display: inline;
}
#radio {
margin-top: 10px;
margin-left: 30px;
}
#radio_text {
color: #545454;
font-size: normal;
font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
font-style: normal;
font-weight: normal;
}
#label {
/*margin-left: -210px;*/
color: #00B6A8;
font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
font-weight: normal;
font-size: medium;
}
Try:
<div id="suggesstion-box"></div>
<div class="wrapper">
<label>Search by :</label>
<input id="radio" name="radio" value="name" type="radio"/>
<span id="radio_text"> name</span>
<input id="radio" name="radio" value="age" type="radio">
<span id="radio_text"/>age</span>
</div>
In the css:
.wrapper {
position: absolute;
}
I am trying to mimic d3 word-cloud that was created by Jason Davies but I have a problem. When I run my code word-cloud is not displayed.
Please, check the code below. I will be glad any help.
Thank you.
<script src="d3/d3.js"></script>
<script src="d3/d3.layout.cloud.js"></script>
<script>
(function() {
var fill = d3.scale.category20();
var layout = d3.layout.cloud()
.size([500, 500])
.words(["form"].map(function(d) {
return {text: d, size: 10 + Math.random() * 90, test: "haha"};
}))
.padding(5)
.rotate(function() { return ~~(Math.random() * 2) * 90; })
.font("Impact")
.fontSize(function(d) { return d.size; })
.on("end", draw);
layout.start();
function draw(words) {
d3.select("body").append("svg")
.attr("width", layout.size()[0])
.attr("height", layout.size()[1])
.append("g")
.attr("transform", "translate(" + layout.size()[0] / 2 + "," + layout.size()[1] / 2 + ")")
.selectAll("text")
.data(words)
.enter().append("text")
.style("font-size", function(d) { return d.size + "px"; })
.style("font-family", "Impact")
.style("fill", function(d, i) { return fill(i); })
.attr("text-anchor", "middle")
.attr("transform", function(d) {
return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
})
.text(function(d) { return d.text; });
}
})();
</script>
body {
position: relative;
font-family: "Helvetica Neue", sans-serif;
width: 960px;
margin: auto;
margin-top: 20px;
margin-bottom: 1em;
}
#presets a { border-left: solid #666 1px; padding: 0 10px; }
#presets a.first { border-left: none; }
#keyword { width: 300px; }
#fetcher { width: 500px; }
#keyword, #go { font-size: 1.5em; }
#text { width: 100%; height: 100px; }
p.copy { font-size: small; }
#form { font-size: small; position: relative; }
hr { border: none; border-bottom: solid #ccc 1px; }
a.active { text-decoration: none; color: #000; font-weight: bold; cursor: text; }
#angles line, #angles path, #angles circle { stroke: #666; }
#angles text { fill: #333; }
#angles path.drag { fill: #666; cursor: move; }
#angles { text-align: center; margin: 0 auto; width: 350px; }
#angles input, #max { width: 42px; }
<html>
<head>
<meta charset="utf-8">
<title>Word Cloud Generator</title>
</head>
<body>
<div id="vis">
<svg width="960" heigth="600"></svg>
</div>
<form id="form">
<p style="position: absolute; right: 0px; top: 0px; display: none;" id="status">244/250</p>
<div style="text-align: center">
<div id="presets"></div>
<div id="custom-area">
<p><label for="text">Enter a URL below, or paste some text.</label>
</p><p><textarea id="text"></textarea>
<button id="go" type="submit">Go!</button>
</p></div>
</div>
<hr>
<div style="float: right; text-align: right">
<p><label for="max">Number of words:</label> <input type="number" value="250" min="1" id="max">
</p><p><label for="per-line"><input type="checkbox" id="per-line"> One word per line</label>
<!--<p><label for="colours">Colours:</label> get random palette-->
</p><p><label>Download:</label>
<a id="download-svg" href="#" target="_blank">SVG</a>
<a id="download-png" href="#" target="_blank">PNG</a>
</p></div>
<div style="float: left">
<p><label>Spiral:</label>
<label for="archimedean"><input type="radio" name="spiral" id="archimedean" value="archimedean" checked="checked"> Archimedean</label>
<label for="rectangular"><input type="radio" name="spiral" id="rectangular" value="rectangular"> Rectangular</label>
</p><p><label for="scale">Scale:</label>
<label for="scale-log"><input type="radio" name="scale" id="scale-log" value="log" checked="checked"> log n</label>
<label for="scale-sqrt"><input type="radio" name="scale" id="scale-sqrt" value="sqrt"> √n</label>
<label for="scale-linear"><input type="radio" name="scale" id="scale-linear" value="linear"> n</label>
</p><p><label for="font">Font:</label> <input type="text" id="font" value="Impact">
</p></div>
<div id="angles">
<p><input type="number" id="angle-count" value="5" min="1"> <label for="angle-count">orientations</label>
<label for="angle-from">from</label> <input type="number" id="angle-from" value="-60" min="-90" max="90"> °
<label for="angle-to">to</label> <input type="number" id="angle-to" value="60" min="-90" max="90"> °
</p>
</div>
<hr style="clear: both">
<p style="float: right">How the Word Cloud Generator Works</p>
<p style="float: left">Copyright © Jason Davies 2014. The generated word clouds may be used for any purpose.</p>
</form>
</body>
</html>
Your problem is in:
<script src="d3/d3.js"></script>
Download d3.min.js and Replace:
<script src="d3/d3.min.js"></script>
Is it possible to change the appearance of <input type="file">?
You can’t modify much about the input[type=file] control itself.
Since clicking a label element correctly paired with an input will activate/focus it, we can use a label to trigger the OS browse dialog.
Here is how you can do it…
label {
cursor: pointer;
/* Style as you please, it will become the visible UI component. */
}
#upload-photo {
opacity: 0;
position: absolute;
z-index: -1;
}
<label for="upload-photo">Browse...</label>
<input type="file" name="photo" id="upload-photo" />
The CSS for the form control will make it appear invisible and not take up space in the document layout, but will still exist so it can be activated via the label.
If you want to display the user’s chosen path after selection, you can listen for the change event with JavaScript and then read the path that the browser makes available to you (for security reasons it can lie to you about the exact path). A way to make it pretty for the end user is to simply use the base name of the path that is returned (so the user simply sees the chosen filename).
There is a great guide by Tympanus for styling this.
Something like that maybe?
<form>
<input id="fileinput" type="file" style="display:none;"/>
</form>
<button id="falseinput">El Cucaratcha, for example</button>
<span id="selected_filename">No file selected</span>
<script>
$(document).ready( function() {
$('#falseinput').click(function(){
$("#fileinput").click();
});
});
$('#fileinput').change(function() {
$('#selected_filename').text($('#fileinput')[0].files[0].name);
});
</script>
<label for="fusk">dsfdsfsd</label>
<input id="fusk" type="file" name="photo" style="display: none;">
why not? ^_^
See the example here
If you're using Bootstrap here is a better solution:
<label class="btn btn-default btn-file">
Browse <input type="file" style="display: none;" required>
</label>
For IE8 and below: https://www.abeautifulsite.net/posts/whipping-file-inputs-into-shape-with-bootstrap-3/#legacy-approach-(ie8-and-below)
Source: https://stackoverflow.com/a/18164555/625952
Easiest way..
<label>
Upload
<input type="file" style="visibility: hidden;"/>
</label>
The trick is hide the input and customize the label.
HTML:
<div class="inputfile-box">
<input type="file" id="file" class="inputfile" onchange='uploadFile(this)'>
<label for="file">
<span id="file-name" class="file-box"></span>
<span class="file-button">
<i class="fa fa-upload" aria-hidden="true"></i>
Select File
</span>
</label>
</div>
CSS:
.inputfile-box {
position: relative;
}
.inputfile {
display: none;
}
.container {
display: inline-block;
width: 100%;
}
.file-box {
display: inline-block;
width: 100%;
border: 1px solid;
padding: 5px 0px 5px 5px;
box-sizing: border-box;
height: calc(2rem - 2px);
}
.file-button {
background: red;
padding: 5px;
position: absolute;
border: 1px solid;
top: 0px;
right: 0px;
}
JS:
function uploadFile(target) {
document.getElementById("file-name").innerHTML = target.files[0].name;
}
You can check this example: https://jsfiddle.net/rjurado/hnf0zhy1/4/
In webkit you can try this out...
input[type="file"]::-webkit-file-upload-button{
/* style goes here */
}
first of all it's a container:
<div class="upload_file_container">
Select file!
<input type="file" name="photo" />
</div>
The second, it's a CSS style, if you want to real more customization, just keeping your eyes is open :)
.upload_file_container{
width:100px;
height:40px;
position:relative;
background(your img);
}
.upload_file_container input{
width:100px;
height:40px;
position:absolute;
left:0;
top:0;
cursor:pointer;
}
This example hasn't style for text inside the button, it depends on font-size, just correct the height and padding-top values for container
It's much better if you just use a <label>, hide the <input>, and customize the label.
HTML:
<input type="file" id="input">
<label for="input" id="label">Choose File</label>
CSS:
input#input{
display: none;
}
label#label{
/* Customize your label here */
}
Bootstrap example
<label className="btn btn-info btn-lg">
Upload
<input type="file" style="display: none" />
</label>
Here is a quick pure CSS workaround (works on chrome and has a FireFox fallback included), including the file name,a label and an custom upload button, does what it should - no need for JavaScript at all! 🎉
Note: ☝ anyways, I would not use it on a real world website - if browser compatibility is a thing to you (what it should be). So it's more kind of experimental, otherwise while time goes by, it could be that this isn't an issue today.
.fileUploadInput {
display: grid;
grid-gap: 10px;
position: relative;
z-index: 1; }
.fileUploadInput label {
display: flex;
align-items: center;
color: setColor(primary, 0.5);
background: setColor(white);
transition: .4s ease;
font-family: arial, sans-serif;
font-size: .75em;
font-weight: regular; }
.fileUploadInput input {
position: relative;
z-index: 1;
padding: 0 gap(m);
width: 100%;
height: 50px;
border: 1px solid #323262;
border-radius: 3px;
font-family: arial, sans-serif;
font-size: 1rem;
user-select: none;
cursor: pointer;
font-weight: regular; }
.fileUploadInput input[type="file"] {
padding: 0 gap(m); }
.fileUploadInput input[type="file"]::-webkit-file-upload-button {
visibility: hidden;
margin-left: 10px;
padding: 0;
height: 50px;
width: 0; }
.fileUploadInput button {
position: absolute;
right: 0;
bottom: 0;
width: 50px;
height: 50px;
line-height: 0;
user-select: none;
color: white;
background-color: #323262;
border-radius: 0 3px 3px 0;
font-family: arial, sans-serif;
font-size: 1rem;
font-weight: 800; }
.fileUploadInput button svg {
width: auto;
height: 50%; }
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
border: 0px;
outline: 0;
background-repeat: no-repeat;
appearance: none;
border-radius: 0;
vertical-align: middle;
font-weight: inherit;
font-style: inherit;
font-family: inherit;
text-decoration: none;
list-style: none;
user-select: text;
line-height: 1.333em; }
body {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100vh;
background: rgba(66, 50, 98, 0.05); }
.container {
padding: 25px;
box-shadow: 0 0 20px rgba(66, 50, 98, 0.35);
border: 1px solid #eaeaea;
border-radius: 3px;
background: white; }
#-moz-document url-prefix() {
.fileUploadInput button{
display: none
}
}
<!-- Author: Ali Soueidan-->
<!-- Author URI: https//: www.alisoueidan.com-->
<div class="container">
<div class="fileUploadInput">
<label>✨ Upload File</label>
<input type="file" />
<button>+</button></div>
</div>
to show path of selected file you can try this
on html :
<div class="fileinputs">
<input type="file" class="file">
</div>
and in javascript :
var fakeFileUpload = document.createElement('div');
fakeFileUpload.className = 'fakefile';
var image = document.createElement('div');
image.className='fakebtn';
image.innerHTML = 'browse';
fakeFileUpload.appendChild(image);
fakeFileUpload.appendChild(document.createElement('input'));
var x = document.getElementsByTagName('input');
for (var i=0;i<x.length;i++) {
if (x[i].type != 'file') continue;
if (x[i].parentNode.className != 'fileinputs') continue;
x[i].className = 'file hidden';
var clone = fakeFileUpload.cloneNode(true);
x[i].parentNode.appendChild(clone);
x[i].relatedElement = clone.getElementsByTagName('input')[0];
x[i].onchange = x[i].onmouseout = function () {
this.relatedElement.value = this.value;
}
}
and style :
div.fileinputs {
position: relative;
height: 30px;
width: 370px;
}
input.file.hidden {
position: relative;
text-align: right;
-moz-opacity: 0;
filter: alpha(opacity: 0);
opacity: 0;
z-index: 2;
}
div.fakefile {
position: absolute;
top: 0px;
left: 0px;
right: 0;
width: 370px;
padding: 0;
margin: 0;
z-index: 1;
line-height: 90%;
}
div.fakefile input {
margin-bottom: 5px;
margin-left: 0;
border: none;
box-shadow: 0px 0px 2px 1px #ccc;
padding: 4px;
width: 241px;
height: 20px;
}
div.fakefile .fakebtn{
width: 150px;
background: #eb5a41;
z-index: 10;
font-family: roya-bold;
border: none;
padding: 5px 15px;
font-size: 18px;
text-align: center;
cursor: pointer;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
transition: all 0.4s ease;
display: inline;
margin-left: 3px;
}
div.fileinputs input[type="file"]:hover + div .fakebtn{
background: #DA472E;
}
div.fileinputs input[type="file"] {
opacity: 0;
position: absolute;
top: -6px;
right: 0px;
z-index: 20;
width: 102px;
height: 40px;
cursor: pointer;
}
Here is one way which I like because it makes the input fill out the whole container. The trick is the "font-size: 100px", and it need to go with the "overflow: hidden" and the relative position.
<div id="upload-file-container" >
<input type="file" />
</div>
#upload-file-container {
width: 200px;
height: 50px;
position: relative;
border: dashed 1px black;
overflow: hidden;
}
#upload-file-container input[type="file"]
{
margin: 0;
opacity: 0;
font-size: 100px;
}
I went for this option which clarifies how to fully customize the browse button by including an handler of the uploaded file name, also customized.
It adds additional fields and client-side controls on them just to show how to include the browse in a "real" form, not just a standalone.
Here's the codepen: http://codepen.io/emiemi/pen/zxNXWR
JS:
//click on our custom btn triggers a click on the hidden actual file input
$("#btnup").click(function(){
$("#fileup").click();
});
//changes on the three fields (input, tit,and name) trigger a control which checks if the 3 fields are all filled and if file field is valid (an image is uploaded)
$('#fileup').change(function(){
var formDOMObj = document.upload;
//here we assign tu our text field #fileup the name of the selected file
var res=$('#fileup').val();
var arr = res.split("\\");
//if file is not valid we show the error icon and the red alert
if (formDOMObj.fileup.value.indexOf(".jpg") == -1 && formDOMObj.fileup.value.indexOf(".png") == -1 && formDOMObj.fileup.value.indexOf(".jpeg") == -1 && formDOMObj.fileup.value.indexOf(".bmp") == -1 && formDOMObj.fileup.value.indexOf(".JPG") == -1 && formDOMObj.fileup.value.indexOf(".PNG") == -1 && formDOMObj.fileup.value.indexOf(".JPEG") == -1 && formDOMObj.fileup.value.indexOf(".BMP") == -1){
$( ".imgupload" ).hide("slow");
$( ".imguploadok" ).hide("slow");
$( ".imguploadstop" ).show("slow");
$('#nomefile').css({"color":"red","font-weight":700});
$('#nomefile').html("The file "+arr.slice(-1)[0]+" is not an image!");
$( "#bottone" ).hide();
$( "#fakebtn" ).show();
}else{
//if file is valid we show the green alert
$( ".imgupload" ).hide("slow");
$( ".imguploadstop" ).hide("slow");
$( ".imguploadok" ).show("slow");
$('#nomefile').html(arr.slice(-1)[0]);
$('#nomefile').css({"color":"green","font-weight":700});
if (formDOMObj.nome.value!=""&&formDOMObj.tit.value!=""&&formDOMObj.fileup.value!=""){
//if all three fields are valid the fake input btn is hidden and the actual one i s finally hown
$( "#fakebtn" ).hide();
$( "#bottone" ).show();
}
}
});
$('#nome').change(function(){
//same as file change but on name field
var formDOMObj = document.upload;
if (formDOMObj.nome.value!=""&&formDOMObj.tit.value!=""&&formDOMObj.fileup.value!=""){
$( "#fakebtn" ).hide();
$( "#bottone" ).show();
}else{
$( "#bottone" ).hide();
$( "#fakebtn" ).show();
}
});
$('#tit').change(function(){
//same as file change but on tit field
var formDOMObj = document.upload;
if (formDOMObj.nome.value!=""&&formDOMObj.tit.value!=""&&formDOMObj.fileup.value!=""){
$( "#fakebtn" ).hide();
$( "#bottone" ).show();
}else{
$( "#bottone" ).hide();
$( "#fakebtn" ).show();
}
});
HTML:
<form name="upload" method="post" action="/" enctype="multipart/form-data" accept-charset="utf-8">
<div class="row">
<div class="col-md-6 center">
<!--this is the actual file input, s hidden beacause we wanna use our custom one-->
<input type="file" value="" class="hidden" name="fileup" id="fileup">
<div class="btn-container">
<!--the three icons: default, ok file (img), error file (not an img)-->
<h1 class="imgupload"><i class="fa fa-file-image-o"></i></h1>
<h1 class="imguploadok"><i class="fa fa-check"></i></h1>
<h1 class="imguploadstop"><i class="fa fa-times"></i></h1>
<!--this field changes dinamically displaying the filename we are trying to upload-->
<p id="nomefile">Only pics allowed! (jpg,jpeg,bmp,png)</p>
<!--our custom btn which triggers the actual hidden one-->
<button type="button" id="btnup" class="btn btn-primary btn-lg">Browse for your pic!</button>
</div>
</div>
<!--additional fields-->
<div class="col-md-6">
<div class="row">
<div class="form-group" id="top">
<div class="col-md-12">
<input type="text" maxlength="100" class="form-control" name="nome" id="nome" placeholder="Your Name">
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-md-12">
<input type="text" maxlength="50" class="form-control" name="tit" id="tit" placeholder="I am rubber, you are glue">
</div>
</div>
</div>
<div class="row">
<div class="col-md-8">
<p class="white">All fields are mandatory</p>
</div>
<div class="col-md-4">
<!--the defauld disabled btn and the actual one shown only if the three fields are valid-->
<input type="submit" value="Submit!" class="btn btn-primary" id="bottone" style="padding-left:50px; padding-right:50px; display:none;">
<button type="button" class="btn btn-default" disabled="disabled" id="fakebtn" style="padding-left:40px; padding-right:40px;">Submit! <i class="fa fa-minus-circle"></i></button>
</div>
</div>
</div>
</div>
$(document).ready(function () {
$(document).mousemove(function () {
$('#myList').css('display', 'block');
$("#seebtn").css('display', 'none');
$("#hidebtn").css('display', 'none');
$('#displayFileNames').html('');
$("#myList").html('');
var fileArray1 = document.getElementsByClassName('file-input');
for (var i = 0; i < fileArray1.length; i++) {
var files = fileArray1[i].files;
for (var j = 0; j < files.length; j++) {
$("#myList").append("<li style='color:black'>" + files[j].name + "</li>");
}
};
if (($("#myList").html()) != '') {
$('#unselect').css('display', 'block');
$('#divforfile').css('color', 'green');
$('#attach').css('color', 'green');
$('#displayFileNames').html($("#myList").children().length + ' ' + 'files selezionato');
};
if (($("#myList").html()) == '') {
$('#divforfile').css('color', 'black');
$('#attach').css('color', 'black');
$('#displayFileNames').append('Nessun File Selezionato');
};
});
});
function choosefiles(obj) {
$(obj).hide();
$('#myList').css('display', 'none');
$('#hidebtn').css('display', 'none');
$("#seebtn").css('display', 'none');
$('#unselect').css('display', 'none');
$("#upload-form").append("<input class='file-input inputs' type='file' onclick='choosefiles(this)' name='file[]' multiple='multiple' />");
$('#displayFileNames').html('');
}
$(document).ready(function () {
$('#unselect').click(function () {
$('#hidebtn').css('display', 'none');
$("#seebtn").css('display', 'none');
$('#displayFileNames').html('');
$("#myList").html('');
$('#myFileInput').val('');
document.getElementById('upload-form').reset();
$('#unselect').css('display', 'none');
$('#divforfile').css('color', 'black');
$('#attach').css('color', 'black');
});
});
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.divs {
position: absolute;
display: inline-block;
background-color: #fff;
}
.inputs {
position: absolute;
left: 0px;
height: 2%;
width: 15%;
opacity: 0;
background: #00f;
z-index: 100;
}
.icons {
position: absolute;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<form id='upload-form' action='' method='post' enctype='multipart/form-data'>
<div class="divs" id="divforfile" style="color:black">
<input id='myFileInput' class='file-input inputs' type='file' name='file[]' onclick="choosefiles(this)" multiple='multiple' />
<i class="material-icons" id="attach" style="font-size:21px;color:black">attach_file</i><label>Allegati</label>
</div>
</form>
<br />
</div>
<br />
<div>
<button style="border:none; background-color:white; color:black; display:none" id="seebtn"><p>Files ▼</p></button>
<button style="border:none; background-color:white; color:black; display:none" id="hidebtn"><p>Files ▲</p></button>
<button type="button" class="close" aria-label="Close" id="unselect" style="display:none;float:left">
<span style="color:red">×</span>
</button>
<div id="displayFileNames">
</div>
<ul id="myList"></ul>
</div>
This is my fully functional customerized file upload/Attachment using jquery & javascript (Visual studio). This will be useful !
Code will be available at the comment section !
Link : https://youtu.be/It38OzMAeig
Enjoy :)
$(document).ready(function () {
$(document).mousemove(function () {
$('#myList').css('display', 'block');
$("#seebtn").css('display', 'none');
$("#hidebtn").css('display', 'none');
$('#displayFileNames').html('');
$("#myList").html('');
var fileArray1 = document.getElementsByClassName('file-input');
for (var i = 0; i < fileArray1.length; i++) {
var files = fileArray1[i].files;
for (var j = 0; j < files.length; j++) {
$("#myList").append("<li style='color:black'>" + files[j].name + "</li>");
}
};
if (($("#myList").html()) != '') {
$('#unselect').css('display', 'block');
$('#divforfile').css('color', 'green');
$('#attach').css('color', 'green');
$('#displayFileNames').html($("#myList").children().length + ' ' + 'files selezionato');
};
if (($("#myList").html()) == '') {
$('#divforfile').css('color', 'black');
$('#attach').css('color', 'black');
$('#displayFileNames').append('Nessun File Selezionato');
};
});
});
function choosefiles(obj) {
$(obj).hide();
$('#myList').css('display', 'none');
$('#hidebtn').css('display', 'none');
$("#seebtn").css('display', 'none');
$('#unselect').css('display', 'none');
$("#upload-form").append("<input class='file-input inputs' type='file' onclick='choosefiles(this)' name='file[]' multiple='multiple' />");
$('#displayFileNames').html('');
}
$(document).ready(function () {
$('#unselect').click(function () {
$('#hidebtn').css('display', 'none');
$("#seebtn").css('display', 'none');
$('#displayFileNames').html('');
$("#myList").html('');
$('#myFileInput').val('');
document.getElementById('upload-form').reset();
$('#unselect').css('display', 'none');
$('#divforfile').css('color', 'black');
$('#attach').css('color', 'black');
});
});
<style>
.divs {
position: absolute;
display: inline-block;
background-color: #fff;
}
.inputs {
position: absolute;
left: 0px;
height: 2%;
width: 15%;
opacity: 0;
background: #00f;
z-index: 100;
}
.icons {
position: absolute;
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div>
<form id='upload-form' action='' method='post' enctype='multipart/form-data'>
<div class="divs" id="divforfile" style="color:black">
<input id='myFileInput' class='file-input inputs' type='file' name='file[]' onclick="choosefiles(this)" multiple='multiple' />
<i class="material-icons" id="attach" style="font-size:21px;color:black">attach_file</i><label>Allegati</label>
</div>
</form>
<br />
</div>
<br />
<div>
<button style="border:none; background-color:white; color:black; display:none" id="seebtn"><p>Files ▼</p></button>
<button style="border:none; background-color:white; color:black; display:none" id="hidebtn"><p>Files ▲</p></button>
<button type="button" class="close" aria-label="Close" id="unselect" style="display:none;float:left">
<span style="color:red">×</span>
</button>
<div id="displayFileNames">
</div>
<ul id="myList"></ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
$(document).ready(function () {
$(document).mousemove(function () {
$('#myList').css('display', 'block');
$("#seebtn").css('display', 'none');
$("#hidebtn").css('display', 'none');
$('#displayFileNames').html('');
$("#myList").html('');
var fileArray1 = document.getElementsByClassName('file-input');
for (var i = 0; i < fileArray1.length; i++) {
var files = fileArray1[i].files;
for (var j = 0; j < files.length; j++) {
$("#myList").append("<li style='color:black'>" + files[j].name + "</li>");
}
};
if (($("#myList").html()) != '') {
$('#unselect').css('display', 'block');
$('#divforfile').css('color', 'green');
$('#attach').css('color', 'green');
$('#displayFileNames').html($("#myList").children().length + ' ' + 'files selezionato');
};
if (($("#myList").html()) == '') {
$('#divforfile').css('color', 'black');
$('#attach').css('color', 'black');
$('#displayFileNames').append('Nessun File Selezionato');
};
});
});
function choosefiles(obj) {
$(obj).hide();
$('#myList').css('display', 'none');
$('#hidebtn').css('display', 'none');
$("#seebtn").css('display', 'none');
$('#unselect').css('display', 'none');
$("#upload-form").append("<input class='file-input inputs' type='file' onclick='choosefiles(this)' name='file[]' multiple='multiple' />");
$('#displayFileNames').html('');
}
$(document).ready(function () {
$('#unselect').click(function () {
$('#hidebtn').css('display', 'none');
$("#seebtn").css('display', 'none');
$('#displayFileNames').html('');
$("#myList").html('');
$('#myFileInput').val('');
document.getElementById('upload-form').reset();
$('#unselect').css('display', 'none');
$('#divforfile').css('color', 'black');
$('#attach').css('color', 'black');
});
});
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.divs {
position: absolute;
display: inline-block;
background-color: #fff;
}
.inputs {
position: absolute;
left: 0px;
height: 2%;
width: 15%;
opacity: 0;
background: #00f;
z-index: 100;
}
.icons {
position: absolute;
}
</style>
<div>
<form id='upload-form' action='' method='post' enctype='multipart/form-data'>
<div class="divs" id="divforfile" style="color:black">
<input id='myFileInput' class='file-input inputs' type='file' name='file[]' onclick="choosefiles(this)" multiple='multiple' />
<i class="material-icons" id="attach" style="font-size:21px;color:black">attach_file</i><label>Allegati</label>
</div>
</form>
<br />
</div>
<br />
<div>
<button style="border:none; background-color:white; color:black; display:none" id="seebtn"><p>Files ▼</p></button>
<button style="border:none; background-color:white; color:black; display:none" id="hidebtn"><p>Files ▲</p></button>
<button type="button" class="close" aria-label="Close" id="unselect" style="display:none;float:left">
<span style="color:red">×</span>
</button>
<div id="displayFileNames">
</div>
<ul id="myList"></ul>
</div>
You can style them, but you can't remove the elements that are already there. If you're creative, you can work with that and do something like this:
input[type=file] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: #EEE;
background: linear-gradient(to top, #FFF, #DDD);
border: thin solid rgba(0,0,0, .5);
border-radius: .25em;
box-shadow: inset .25em .25em .25em rgba(255,255,255, .5), inset -.1em -.1em .1em rgba(0,0,0, 0.1);
cursor: text;
padding: .25em;
}
http://jsfiddle.net/zr1x1m2b/1/
I suggest you play around with this code, remove lines, add your own, do whatever until you get something that looks how you like!
Just style a normal button however you want, using your favorite CSS.
Then call a simple JS function to create and link a hidden input element to your styled button. Don't add browser-specific CSS to do the hiding part.
<!DOCTYPE html>
<meta charset="utf-8">
<style>
button {
width : 160px;
height : 30px;
font-size : 13px;
border : none;
text-align : center;
background-color : #444;
color : #6f0;
}
button:active {
background-color : #779;
}
</style>
<button id="upload">Styled upload button!</button>
<script>
function Upload_On_Click(id, handler) {
var hidden_input = null;
document.getElementById(id).onclick = function() {hidden_input.click();}
function setup_hidden_input() {
hidden_input && hidden_input.parentNode.removeChild(hidden_input);
hidden_input = document.createElement("input");
hidden_input.setAttribute("type", "file");
hidden_input.style.visibility = "hidden";
document.querySelector("body").appendChild(hidden_input);
hidden_input.onchange = function() {
handler(hidden_input.files[0]);
setup_hidden_input();
};
}
setup_hidden_input();
}
Upload_On_Click("upload", function(file) {
console.log("GOT FILE: " + file.name);
});
</script>
Notice how the above code re-links it after every time the user chooses a file. This is important because "onchange" is only called if the user changes the filename. But you probably want to get the file every time the user provides it.
For more details, research DropZone and gmail uploads.
Here is one way I recently discovered, with a bit of jQuery
HTML Code:
<form action="">
<input type="file" name="file_upload" style="display:none" id="myFile">
<a onclick="fileUpload()"> Upload a file </a>
</form>
For the javascript/jQuery part :
<script>
function fileUpload() {
$("#myFile").click();
}
</script>
In this example, I have put an "anchor" tag to trigger the file upload. You can replace with anything you want, just remember to put the "onclick" attribute with the proper function.
Hope this helps!
P.S. : Do not forget to include jQuery from CDN or any other source