I have a login form where if the input sn on focus and then you press enter it will prompt errors asking you to fill out the fields. But if you fill out both fields, no error comes out and even when you enter the correct credentials and then press enter. nothing happens. the form just gets reset. It works fine if I click the button though.
I am using semantic ui as front-end framework and using its form validation for the errors. Is it because of semantic?
here the link for semantic ui form validation's documentation
Here is my form
<form id="login" class="ui large form" method="post" action="">
<div class="ui stacked secondary segment">
<div class="field">
<div class="ui left icon input">
<i class="user icon"></i>
<input type="text" name="username" placeholder="Nama Pengguna">
</div>
</div>
<div class="field">
<div class="ui left icon input">
<i class="lock icon"></i>
<input type="password" name="password" placeholder="Kata laluan">
</div>
</div>
<input type="submit" name="btn-login" value="Log-masuk" class="ui fluid large teal submit button">
</div>
<div class="ui error message"></div>
</form>
and the javascript for it is
$(document).ready(function() {
$('.ui.form').form({
fields: {
username: {
identifier: 'username',
rules: [{
type: 'empty',
prompt: 'Sila masukkan Nama Pengguna'
}]
},
password: {
identifier: 'password',
rules: [{
type: 'empty',
prompt: 'Sila masukkan Kata Laluan'
}]
}
}
});
});
The problem here is that the form has 2 options.
When you hit enter the form submits and when you click the button, your Javascript runs.
You dont want it to submit, you want to trigger the attached JavaScript so
remove the form method and the form action
This is a rule in general, you let the form submit handle the submission, or you let the JavaScript handle it.
As you can see from the semantic ui docs the form doesnt have a method or action
<div class="ui horizontal divider">or</div>
<form class="ui form segment">
<div class="two fields">
<div class="field">
<label>Username</label>
<input placeholder="Username" name="username" type="text">
</div>
<div class="field">
<label>Password</label>
<input type="password" name="password">
</div>
</div>
<div class="inline field">
<div class="ui checkbox">
<input type="checkbox" name="terms">
<label>I agree to the terms and conditions</label>
</div>
</div>
<div class="ui blue submit button">Submit</div>
<div class="ui error message"></div>
</form>
I had the same problem. I prefer to use the default submit button in a form, and not add extra javascript to get a form submit working.
I also had this code:
<div class="ui fluid large blue submit button">
<p>Register</p>
</div>
But when you replace this with this:
<button type="submit" class="blue fluid large ui button">Register</button>
You have the same layout, and the default submit button is working.
of course you still need the form action and method:
<form action="/register/process-form" method="POST" class="ui large form">
by the way, i use jade template rendering, in jade above codes are:
form.ui.large.form(action="/register/process-form" method="POST")
div.ui.stacked.segment
div.field
div.ui.left.icon.input
i.user.icon
input(type="text" name="email" placeholder="E-mail adres")
div.ui.fluid.large.blue.submit.button
p Register
button.blue.fluid.large.ui.button(type="submit") Register
Note: i showed both buttons in the jade code to show the difference, you need to use the bottom one.
Related
I have two inline radio button in a form using Bootstrap. But when I validate it then the message showing inside of first radio button instead of showing after second radio button. I would like to show that radio button message like Email and password. Here is the screenshot of my form.
Without Validation:
With Validation:
HTML Form:
<form name="registration" action="">
<div class="signingInner">
<h4 style="font-weight: 500; text-align:center; font-size: 20px ">Sign in to your Account</h4>
<div class="form-group">
<label for="emailId">Email Address:</label>
<input type="text" class="form-control" id="login_email" name="login_email" placeholder="Please enter Email address">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" name="login_password" id="login_password" placeholder="●●●●●●">
</div>
<div class="form-group">
<div class="radio-inline" style="padding-left: 100px;">
<input type="radio" id="user" name="LoginMode" value="user" >
As <strong>User</strong> </>
</div>
<div class="radio-inline" style="padding-left: 30px;">
<input type="radio" id="company" name="LoginMode" value="company" >
As <strong>Company</strong></>
</div>
</div>
<input type="submit" name="btnLogin" class="btn btn-lg btn-primary btn-block" value="Login"></input>
</div>
</form>
Plunker Link:
https://plnkr.co/edit/0vpvU9QbRu8Mlwbi04ti?p=preview
The trick is to use errorPlacement callback function.
So I am checking whether the rendered type is radio button then I am tracking the appropriate topmost parent div and inserting the message after that.
errorPlacement: function(error, element) {
if ( element.is(":radio") ) {
error.insertAfter( element.parent().parent().parent().parent());
}
else { // This is the default behavior of the script for all fields
error.insertAfter( element );
}
},
See the updated plunkr here.
And the output looks like
EDIT:
I have finally updated the original plunkr provided by you.
I'm trying to integrate SemanticUI with Vue and I have a Login component with a form in it.
I've added v-on:submit.prevent="onSubmit" to the form but when I press enter on one of the form's fields the form still submits and my method ie never called.
Basically what I'm trying to do is replicate the on("submit" event from jQuery.
Any idea what's the problem?
main.js
import Vue from "vue";
import VueRouter from "vue-router";
import App from "./App";
Vue.use(VueRouter);
new Vue({
el : "#app",
template : "<App/>",
components: { App }
});
and Login.vue
<template>
<div class="ui middle aligned center aligned grid">
<div class="column">
<h2 class="ui teal header">
Login
</h2>
<form class="ui large form login" v-on:submit.prevent="onSubmit">
<div class="ui stacked segment">
<div class="field">
<div class="ui left icon input">
<i class="cloud icon"></i>
<input type="text" name="hostname" placeholder="Hostname" value="">
</div>
</div>
<div class="field">
<div class="ui left icon input">
<i class="user icon"></i>
<input type="text" name="username" placeholder="Username" value="">
</div>
</div>
<div class="field">
<div class="ui left icon input">
<i class="lock icon"></i>
<input type="password" name="password" placeholder="Password" value="">
</div>
</div>
<div class="ui fluid large teal submit button">Login</div>
</div>
</form>
</div>
</div>
</template>
<script>
export default {
name: "login",
mounted: function() {
this.$nextTick(function() {
jQuery(this.$el).find("form").form({
fields: {
hostname: {
identifier: "hostname",
rules : [{
type : "empty",
prompt: "Please enter the instance hostname"
}]
},
username: {
identifier: "username",
rules : [{
type : "empty",
prompt: "Please enter your username"
}]
},
password: {
identifier: "password",
rules : [{
type : "empty",
prompt: "Please enter your password"
}]
}
}
});
});
},
methods: {
onSubmit: function(e) {
alert("ok");
}
}
};
</script>
A form will submit on ENTER key if it has one of the following:
a button inside, without type="button"
an input tag with type="submit"
Your form does not seem to have either of the above. But assuming you have a submit button elsewhere, here is how you can avoid form submit:
<form onsubmit="return false;">
<input type="text" placeholder="Host Name" v-model="hostName">
<input type="text" placeholder="User Name" v-model="userName">
<input type="password" placeholder="Password" v-model="password">
<input type="submit" value="Submit form">
</form>
Note that the form has onsubmit="return false;" which prevents accidental submission.
This does not stop you from using a method in Vue component, initiated via a button using #click="submitLoginForm()", to do the submission using this.$http.post(...)
I have used below code for bootstrap textbox and textarea and also in the last div I have used button type="reset" .But when I entered invalid shop name and valid Address and click on Reset button it reset it and after only entering invalid shop name and click on Add shop then it is successfully adding new shop.Both the textbox show green background-color and correct sign even after it is empty.
Please help me.
Please see below image after onclick of reset button:
<form id="defaultForm" method="post" class="form-horizontal"
data-bv-message="This value is not valid"
data-bv-feedbackicons-valid="glyphicon glyphicon-ok"
data-bv-feedbackicons-invalid="glyphicon glyphicon-remove"
data-bv-feedbackicons-validating="glyphicon glyphicon-refresh">
<div class="form-group">
<label class="col-xs-3 control-label">Shop Name</label>
<div class="col-xs-4">
<input type="text" class="form-control" pattern="^[a-zA-Z\s]+$"
data-bv-regexp-message="The shop name can consist of alphabetical characters only" name="shopName" placeholder="Shop Name" data-bv-trigger="blur" data-bv-notempty="true" data-bv-notempty-message="Shop name is required and cannot be empty" />
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Shop Address</label>
<div class="col-xs-4">
<textarea id="id_txt_addr" type="text" class="form-control" name="shop_address" placeholder="Shop Address" style="height:100px" maxlength="200" data-bv-trigger="blur" data-bv-notempty="true" data-bv-notempty-message="Shop address is required and cannot be empty"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-xs-9 col-xs-offset-3">
<input type="submit" name="add" class="btn btn-primary" value="Add Shop">
<button type="reset" class="btn btn-default">Reset</button>
</div>
</div>
</form>
On reset button click, remove all relevant validation classes and elements handling error message inside closest form. Here an example:
$(':reset').on('click', function(){
var $form = $(this).closest("form");
$form.find('*').removeClass('has-success has-error glyphicon-ok glyphicon-remove');
$form.find('.help-block').remove();
});
-DEMO-
Now maybe there is a bootstrap method to reset validation, you should check bootstrap DOC maybe.
$(document).ready(function () {
$("#ibtReset").on("click", function () {
$('#ShopName').val("");
$('#id_txt_addr').val("");
$('.glyphicon ').remove();
});
});
On reset button click both the values become empty.
It may help You.
I am trying to test PHP post data using AJAX. From page test I want to post on to the same page and check if PHP receives post data, if data is posted just to see if redirection is successful, so that I can write authentication code and assign session before page redirects.
When I click on the login button, I just checking isset post data and if data exists then redirect. I am not sure why this is not working. Any help is appreciated.
<script>
$(document).ready(function(){
$('#login').click(function(){
$.ajax({
type: 'POST',
url: 'http://domain.com/backend/test',
data: { username: "John", password: "Boston" }
});
return false;
});
});
</script>
<?php
if(isset($_POST['username']) && isset($_POST['password'])) {
redirectto("http://domain.com/backend/test2");
// redirecto is a function equivalent to header location
}
?>
<form autocomplete="off" class="ui fluid form segment" method="post">
<div class="ui fluid form segment">
<div class="two fields">
<div class="field">
<label>Email/Username</label>
<input placeholder="Email/Username" name="username" id="username" type="text">
</div>
<div class="field">
<label>Password</label>
<input placeholder="Password" name="password" id="password" type="password">
</div>
</div>
<input type="submit" class="ui fluid submit button" name="dosubmit" value="Submit" id="login" />
</div>
</form>
Change
<input type="submit" class="ui fluid submit button" name="dosubmit" value="Submit" id="login" />
to
<input type="button" class="ui fluid submit button" name="dosubmit" value="Submit" id="login" />
Even if you triggered the click event of #login button, its a submit type and it will trigger the submit event first. Changing the button type should help.
In the JS, instead of using a click event, use submit.
I mean, instead of
$('#login').click(function(){
use
$('#login').submit(function(){
Also, you may add an action property to the form:
<form autocomplete="off" class="ui fluid form segment" method="post" action="#">
I have a website which I need to login to automatically.
I am trying to use Watin .NET library in order to do that.
When I fill out the user name and password fields using Watin, the sumbit button remains disabled.
I tried applying many events on the other fields (KeyPress, KeyDown, KeyUp, Tab, Enter...) Nothing worked.
Pardon me for finding the button by value, but this is the only way that I found that worked.
var field = ie.TextField(Find.ByName("userName"));
field.TypeText("username");
field.KeyDown();
field.KeyUp();
field = ie.TextField(Find.ByName("password"));
field.TypeText("pwd");
field.KeyDown();
field.KeyUp();
ie.Button(Find.ByValue("התחבר")).Click();
I am getting an exception that the button is disabled.
The page which I need to login to is:
https://portal.dorad.co.il/#/Login
All that I want is to find an automatic way to make the sumbit button enabled so that I can login.
Login Form Code:
<form class="span5 offset4 loginForm ng-pristine ng-invalid ng-invalid-required" name="loginForm" ng-submit="doLogin()" autocomplete="off">
<h2>
Login
</h2>
<fieldset>
<div class="control-group">
<label class="control-label" for="fullName">
User Name
</label>
<div class="controls">
<input name="userName" id="useName" ng-required="true" type="text" ng-model="user.userName" auto-fill-sync="" autocomplete="off" class="ng-pristine ng-invalid ng-invalid-required" required="required">
<span class="alert alert-error" ng-show="loginForm.userName.$error.required && loginForm.userName.$dirty" style="display: none;">
Mandatory Field
</span>
</div>
</div>
<div class="control-group">
<label class="control-label" for="emailAddress">
Password
</label>
<div class="controls">
<input name="password" id="password" type="password" ng-model="user.password" auto-fill-sync="" ng-required="true" autocomplete="off" class="ng-pristine ng-invalid ng-invalid-required" required="required">
<span class="alert alert-error" ng-show="loginForm.password.$error.required && loginForm.password.$dirty" style="display: none;">
Mandatory Field
</span>
</div>
</div>
</fieldset>
<input type="submit" class="btn" value="התחבר" ng-disabled="loginForm.$invalid" disabled="disabled">
</form>
This might be due to firing of an event getting blocked.
Try using:
Element fg = ie.TextField(Find.ByName("password"));
fg.DomContainer.RunScript("$('#"+fg.id+'").change();");
This solved a similar problem for me.
Ok. Then try to use Eval function which takes java script code. Pass the two elements to the below method and check.
private void ChangeAndBlur(Element element)
{
try
{
element.DomContainer.Eval(string.Format("$('#{0}').change()", element.Id));
element.DomContainer.Eval(string.Format("$('#{0}').blur()", element.Id));
}
catch
{ }
}