I am developing a web app with Swift 4 and Vapor 2.0. I have a method for a POST request which creates a new user:
builder.post("user", "createUser") { (request) -> ResponseRepresentable in
But I don't know how to add action for button in the .leaf file to call the createUser method. It easy to add a JavaScript action in a .html file, like that <script src="js/index.js"></script>. But with Vapor, I didn't see any mention about that in the Vapor 2.0 docs
Update:
With help from #Caleb Kleveter, now it worked. I updated html page(it's just for test, so that it's not a nice page) with hope: it'll help for newcomer whom face with the same problem when use vapor.
Here is my HTML contents:
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Responsive Login Form</title>
<link rel='stylesheet prefetch' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'>
<link rel="stylesheet" href="styles/app.css">
</head>
<body>
<link href='https://fonts.googleapis.com/css?family=Ubuntu:500' rel='stylesheet' type='text/css'>
<h3>
<form action="/user/createUser" method="POST" class="login-form">
<label for="username">Username:</label>
<input type="text" placeholder="Username" name="username"/>
<label for="password">Password:</label>
<input type="password" placeholder="Password" name="password"/>
<input type="submit" value="Login" class="login-button"/>
<form>
</h3>
<a class="sign-up">Sign Up!</a>
<br>
<h6 class="no-access">Can't access your account?</h6>
</div>
</div>
<!-- <div class="error-page">
<div class="try-again">Error: Try again?</div>
</div> -->
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
Scripts can be added to a .leaf file the same way as you would in HTML, just add a script tag:
<script src="js/index.js"></script>
From viewing your code, what you want is a form to post the data to the server. You should replace your .login-form div with a form element:
<form action="/create-user" method="POST" class="login-form">
<label for="username">Username:</label>
<input type="text" placeholder="Username" name="username"/>
<label for="password">Password:</label>
<input type="password" placeholder="Password" name="password"/>
<input type="submit" value="Login" class="login-button"/>
<form>
<a class="sign-up">Sign Up!</a>
<h6 class="no-access">Can't access your account?</h6>
Here is the documentation for HTML forms.
Then you should be able to access the form data in you route method with request.body:
func createUser(req: Request) throws -> ResponseRepresentable {
guard let password = req.body["password"]?.string,
let username = req.body["username"]?.string else {
throw Abort.badRequest
}
// The rest of your code goes here
}
I am not sure if this will work, I haven't tested it, but I think you get the idea.
Related
I'm trying to build a simple email form like in the Bootstrap 4 docs but for some reason the formatting is wrong.
This is what the example looks like:
But for some reason this is what it compiles to in my project:
Clearly there's something in my codebase/environment that's messing with the layout. Why are my fields not in separate rows like the example? Why is there no spacing between elements? Why is the submit button not blue? It's a mess. Is my bootstrap 4 dependency not installed properly?
I'm using the exact html from the example. Code below.
<template>
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</template>
main.ts
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// #ts-ignore
createApp(App).use(store).use(router).mount('#app')
if you are looking for a simple solution for a static website or basic stuff
all you need to do is to add this cdn to your html
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
and this bootstrap javascript cdn for dropdowns and navbar
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
and the jQuery cdn
check this link for a live preview
https://stackblitz.com/edit/web-platform-ss4nvu?file=script.js
basicly this
<link rel="stylesheet" type="text/css"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
at the head tag :)
but i see that you mentioned vue js in the tags you are looking for an answer so i also recommend on going throw the website of vueJS bootstrap which is amazing if you have any trouble i am available also in gmail :)
dolev146#gmail.com
You forgot to link css files from bootstrap.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
copy paste it in the head of your html
also read the get started documentation: bootstrap get started doc
<!DOCTYPE HTML>
<html lang = "en">
<head>
<title>Contact</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="CSS/style.css" rel="stylesheet" type="text/css" />
<link href="CSS/contact.css" rel="stylesheet" type="text/css" />
</head>
<body>
<main>
<div class="wrapper">
<form class="contact-form" action="mailto:zachareaislam#gmail.com" method="post">
<br><br>
<input type="text" name="first_Name" placeholder="First name" pattern="[a-z, A-Z]{0,15}" required><br>
<input type="text" name="last_Name" placeholder="Last Name" pattern="[a-z, A-Z]{0,15}" required><br>
<input type="email" name="email " placeholder="Your email address" required><br>
<input type="text" name="subject" placeholder="Subject"><br>
<textarea name="message" placeholder="Your message" required></textarea><br>
<input type="submit" name="submit">
</form>
</div>
</main>
</body>
</html>
/*Not sure as to why it doesn't work.
/*Only just noticed it didn't work while performing some maintenance
You cannot only use HTML, since sending data with a form requires a server backend (like with node or php) to post data.
You cannot send a form directly to email from the HTML. Form should be submitted to some processing file, like .php. You might have had some kind of framework that used to process these types of forms, but generally it should be following:
Action should be a path to the script file like mail.php
Mail.php receives info from the HTML in a $_REQUEST[] set of variables, each variable has a "name" and value.
It processes the request, then can send back to the page.
below is my Controller class.
#Controller
public class BankController {
#Autowired
private CustomerService customerService;
#Autowired
private CustomerRepository customerRepository;
#RequestMapping(value="/login", method=RequestMethod.POST)
public String actionLogin(#RequestParam String email, #RequestParam String password, Model model){
List<Customer> byEmail = customerRepository.findByEmail(email);
Customer customer = byEmail.get(0);
if(BCrypt.checkpw(password, customer.getHashedPassword())){
model.addAttribute("customer", customer);
return "enterSiteView.html";
}
return "errorView.html";
}
I have kept enterSiteView.html, errorView.html in templates folder as given in the documentation.
When I click the login button the url does change to http://localhost:9090/enterSiteView.html but it displays an error as.
Whitelabel Error Page
application has no explicit mapping for /error, so you are seeing this as a fallback.
Sun Oct 23 14:03:43 IST 2016
There was an unexpected error (type=Not Found, status=404).
No message available`
My enterSiteView.html has nothing but just a Hello World text.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello Earth</title>
</head>
<body>
</body>
</html>
Login Page:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sign-Up/Login Form</title>
<link href='http://fonts.googleapis.com/css?family=Titillium+Web:400,300,600' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="form">
<ul class="tab-group">
<li class="tab active">Sign Up</li>
<li class="tab">Log In</li>
</ul>
<div class="tab-content">
<div id="signup">
<h1>Sign Up for Free</h1>
<form action="/register" method="post">
<div class="top-row">
<div class="field-wrap">
<label>
First Name<span class="req">*</span>
</label>
<input type="text" required autocomplete="off"/>
</div>
<div class="field-wrap">
<label>
Last Name<span class="req">*</span>
</label>
<input type="text" required autocomplete="off"/>
</div>
</div>
<div class="field-wrap">
<label>
Email Address<span class="req">*</span>
</label>
<input type="email" required autocomplete="on"/>
</div>
<div class="field-wrap">
<label>
Set A Password<span class="req">*</span>
</label>
<input type="password" required autocomplete="off"/>
</div>
<button type="submit" class="button button-block"/>Get Started</button>
</form>
</div>
<div id="login">
<h1>Welcome Back!</h1>
<form action="/login" method="post">
<div class="field-wrap">
<label>
Email Address<span class="req">*</span>
</label>
<input type="email" id="email" name="email" required autocomplete="off"/>
</div>
<div class="field-wrap">
<label>
Password<span class="req">*</span>
</label>
<input type="password" id="password" name="password" required autocomplete="off"/>
</div>
<p class="forgot">Forgot Password?</p>
<button class="button button-block"/>
Log In</button>
</form>
</div>
</div><!-- tab-content -->
</div> <!-- /form -->
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
I have places index.html in static for the welcomepage. After the login is successful it should redirect to the desired page, instead it shows the above error.
We have common path scheme of java web application:
[host]:[port]/MyWebApplication/personal/info/top.html
where:
MyWebApplication is context path (in microservices application mapped
to root by default)
personal - is a servlet path
info/top.html is a path info
requestURI = contextPath + servletPath + pathInfo
So you redirecting base on relative path, it means that if you: specify this way :
return "redirect: errorView.html"
it directs you
(requestURI - last path part) + errorView.html
if you came from http://example.com/user/path/to/info.html , you redirect to http://example.com/user/path/to/errorView, but if you came from http://example.com/user , you redirect to http://example.com/errorView.html. So changes only last request path part.
When you use :
return "redirect: /errorView.html"
it directs you
context path + new servlet path(/errorView.html)
if you came from http://example.com/user/path/to/info , you redirect to http://example.com/errorView.html. Doesn't matter how long request path is.
Upd: if you take a look at this excellent post, you never face problem with relative path again
I have a form like this,
<form>
Username: <input type="text" name="usrname" required>
<input type="button" value="Post">
</form>
I want a tooltip to pop-up if the user clicks on the button without entering anything in the textbox.
I know it will work if I change the button to like this - <input type="submit" value="Post">. But I don't want to do that.
Did you mean formaction instead of action?
<input type="text" name="usrname" required formaction="action_page.php">
action is a form tag attribute, not inputs's.
Use HTML5
Try like this it will work :
action attribute specifically for form tag. not input tag
<form action="action_page.php">
Username: <input type="text" name="usrname" required >
<input type="submit" value="Post">
</form>
Use method "POST" in tag, It will work
<form action="action_page.php" method="POST">
Username: <input type="text" name="usrname" required >
<input type="submit" value="Post">
</form>
I figured out how to do this with some jQuery based on an answer from this post.
The following code does exactly what I was looking for,
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<form id="myForm">
Username: <input type="text" name="usrname" required id="input">
<input type="button" value="Post" id="button">
</form>
<script>
$('#button').click(function(e) {
if ($('#input').val() === "") {
$('<input type="submit">').hide().appendTo('#myForm').click().remove();
}
});
</script>
</body>
</html>
See here for DEMO
I validate my form by changing input type to email. I have this form:
<form class="validation" action="#" method="get">
<div class="form-group">
<input type="email" name="email" value="" class="form-control" id="newsletter" placeholder="Your Email">
<button data-toggle="modal" data-target="#answer" type="submit" value="Sign up Now" data-error="Bruh, that email address is invalid" required ><i class="fa fa-angle-double-right"></i></button>
</div>
</form>
If there's a valid email address on submit, I want a modal to open. I'm using Bootstrap to achieve this. The problem is that the modal opens on submit even when the email is not valid. How can I fix this?
Look type email doesn't work properly if you want to validate any input use jQuery
<html>
<head>
<meta charset="utf-8">
<title>Makes "field" required and an email address.</title>
<link rel="stylesheet" href="http://jqueryvalidation.org/files/demo/site-demos.css">
</head>
<body>
<form id="myform">
<label for="field">Required, email: </label>
<input class="left" id="field" name="field">
<br/>
<input type="submit" value="Validate!">
</form>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://jqueryvalidation.org/files/dist/jquery.validate.min.js"> </script>
<script src="http://jqueryvalidation.org/files/dist/additional-methods.min.js"></script>
<script>
// just for the demos, avoids form submit
jQuery.validator.setDefaults({
debug: true,
success: "valid"
});
$( "#myform" ).validate({
rules: {
field: {
required: true,
email: true
}
}
});
</script>
</body>
</html>
then you can add the modal for the success