Hi I am using verifyjs to validate my form. But I want to write some code on submit button click and if form validate, I never want to submit form, I am just using 'form' for validation.
$('form').valid() is not valid, how can i validate my form on button click?
So;
<form>
<input type="text" data-validate="number" />
<input type="radio" name="a" value="asd" data-validate="required" />
<input type="radio" name="a" value="asd1" data-validate="required" />
<input type="radio" name="a" value="asd2" data-validate="required" />
<input type="button" value="submit" onclick="abc();" />
</form>
<script>
function abc() {
if ($('form').valid()) { // like this. But valid() is not working in verifyjs.
alert('ok');
}
}
Try $("#my-form").validate(...) for complete form or
$("#my-text-input").validate(...) for inputs
Related
I've an HTML form:
<body>
<div>
<form method="POST" action="/add"name="submitForm">
<label>Message</label><input type="text" name="message" value="" />
<input type="checkbox" name="complete" value=""> Complete<br>
<input type="submit" value="submit" />
</form>
</div>
</body>
Now I want to access both values (message and complete) at the same time when a POST occurs.
How can I do this in Go (gin gonic)?
I can do it in two times by using c.PostForm but is there a way to collect them both?:
func AddTodoHandler(c *gin.Context) {
fmt.Println(c.PostForm("message"))
fmt.Println(c.PostForm("complete"))
I tried fmt.Println(c.PostForm("submitForm")) but that did not work.
I don't know if you've already solved this, but the way I managed to capture the 2 values simultaneously was by removing the value from the checkbox and using the Request.PostForm instead of the PostForm.
I tried using the form's name or id, but it seems that it's still not possible to get the data from them.
<body>
<div>
<form method="POST" action="/add" name="submitForm"> << not work
<label>Message</label><input type="text" name="message" value="" />
<input type="checkbox" name="complete"> Complete<br> << remove value attribute
<input type="submit" value="submit" />
</form>
</div>
</body>
func AddTodoHandler(c *gin.Context) {
fmt.Println(c.Request.PostForm)
Note: as my reputation is less than 50pts, I cannot comment on the post.
I'm trying to implement the answer from this thread, however I've never used AJAX.
The first form sets a variable required in the second form, once this has been set I'd like it to then redirect as per the second form (so I'm guessing the alert wants to come out of the AJAX?)
After updating with charles babbage's answer the first form Submits.
Thanks for any help, it's greatly appreciated!
<script>
$(document).ready(function() {
$("#subbut").click(function() {
$.post($("#priceselect").attr("action"), $("#priceselect").serialize(),
function() {
$.post($("#globaliris").attr("action"), $("#globaliris").serialize(),
function() {
alert('Both forms submitted');
});
});
});
});
</script>
I've put this in the head with the aim of first submitting
<form name="priceselect" id="priceselect" method="post">
<select name="price" id="mySelect" onchange="document.getElementById('selectedValue').innerHTML = this.value;">
<option value="100">Option 1</option>
<option value="120">Option 2</option>
<option value="115">Option 3</option>
<option value="135">Option 4</option>
<option value="80" >Option 5</option>
</select>
<input value="Continue" id="subbut" type="Submit" />
</form>
which should then
(isset($_POST['price']));
$price = $_POST['price'];
in the same page before redirecting to a 3rd party with the submission of
<form id="globaliris" action="https://redirect.globaliris.com/epage.cgi" method="post" class="select">
<input type=hidden name="MERCHANT_ID" value="<?=$merchantid?>">
<input type=hidden name="ORDER_ID" value="<?=$orderid?>">
<input type=hidden name="CURRENCY" value="<?=$curr?>">
<input type=hidden name="AMOUNT" value="<?=$amount?>">
<input type=hidden name="TIMESTAMP" value="<?=$timestamp?>">
<input type=hidden name="MD5HASH" value="<?=$md5hash?>">
<input type=hidden name="AUTO_SETTLE_FLAG" value="1">
<br />
<br />
</form>
In order to trigger the action that you have specified in the Form tag on click of a button, the button should be of type Submit and also it should be inside your form. The position of Submit button is important.
<input type="submit" value="something" id="something">
Edit(as per your new question)
If you want two form's content to be submitted to one action, just add the serialises as below:
$.post($("#priceselect").attr("action"),$("#priceselect").serialize()+$("#globaliris").serialize() ,
function() {
alert('Both forms submitted');
});
});
Hi I've a page with two textboxes and I wanted to apply required validator to both controls. But when I run my code it is applying to only first control. Even though I've given both text boxes as blank, it is showing first text box as required.
Here is my code and not getting where do I missed the second one.
<input type="text" name="firstname" id="firstname" required validationmessage="First name required" />
<input type="text" name="lastname" id="lastname" required validationmessage="Last name required" />
<button class="k-button" id="btnAdd" onclick="addDetails();">Add</button>
function addDetails() {
var validator = $("#btnAdd").kendoValidator().data("kendoValidator");
if (validator.validate()) {
// Add details to db
}
}
Kendo Validator has to be applied to the input that you are validating not to the button. The HTML should be something like:
<div id="my-form">
<div>
<label>
Firstname:
<input type="text" name="firstname" id="firstname" required validationmessage="First name required"/>
</label>
</div>
<div>
<label>
Lastname :
<input type="text" name="lastname" id="lastname" required validationmessage="Last name required"/>
</label>
</div>
</div>
<button class="k-button" id="btnAdd">Add</button>
And the validation function:
$(document).ready(function () {
var validator = $("#my-form").kendoValidator().data("kendoValidator");
$("#btnAdd").on("click", function () {
if (validator.validate()) {
// Add details to db
console.log("good");
} else {
console.log("bad");
}
});
});
I have the problem of doing the validation of fields myself. Now there are 5-6 fields in the form. So I am checking each one in my controller, and if there is wrong i wish to load the view again and pass the error array to it.
I achieved the above functionality with this:
<html>
<head>
<title>My Form</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
</head>
<body>
<?php
echo $fullname;
?>
<?
echo form_open('/membership/register');
?>
<h5>Username</h5>
<input type="text" name="username" value="" size="50" />
<h5>Password</h5>
<input type="text" name="password" value="" size="50" />
<h5>Password Confirm</h5>
<input type="text" name="cpassword" value="" size="50" />
<h5>Email Address</h5>
<input type="text" name="email" value="" size="50" />
<h5>Mobile</h5>
<input type="text" name="mobile" value="" size="15" />
<h5>Home</h5>
<input type="text" name="home" value="" size="15" />
<h5>Full Name</h5>
<input type="text" name="fullname" value="" size="100" />
<br><br>
<div><input type="submit" value="Submit" /></div>
</form>
</body>
</html>
and in controller the code is:
if (preg_match('#[0-9]#',$fullname))
{
$errors['fullname'] = 'wrong name format!';
$this->load->view('register', $errors);
}
Now the real problem I have is if the many fields are wrong. I want to have $errors array passed to view and accessed there for all the values it contains. so I don't have to specify $fullname or $mobile to get the value. How can this be done? as to show the user everything missing in one go
First of all I advise using codeigniter's built in form validation class
Here is how I usually process my validation in the controller:
if ($this->input->post())
{
// process the POST data and store accordingly
$this->form_validation->set_rules('username', 'Username', 'trim|required|min_length[5]|xss_clean');
$this->form_validation->set_rules('password', 'Password', 'trim|required|min_length[6]|xss_clean');
// the rest of your form fields validation can be set here
if ($this->form_validation->run() == FALSE)
{
// validation hasnt run or has errors, here just call your view
$this->load->view('same_view_file_with_the_form', $data);
}
else
{
// process the POST data upon correct validation
}
}
In my view file I call each error like this:
<h5>Username</h5>
<input type="text" name="username" value="" size="50" />
<span class="error-red"><?php echo form_error("username"); ?></span>
<h5>Password</h5>
<input type="text" name="password" value="" size="50" />
<span class="error-red"><?php echo form_error("password"); ?></span>
<h5>Password Confirm</h5>
<input type="text" name="cpassword" value="" size="50" />
<span class="error-red"><?php echo form_error("cpassword"); ?></span>
Do all your checks in the controller prior to binding errors into the view.
e.g.
$errors = array();
if (preg_match('#[0-9]#',$fullname))
{
$errors['fullname'] = 'wrong name format!';
}
if ( do_something_to_validate(mobile) )
{
$errors['mobile'] = 'invalid mobile';
}
// after checking everything do this
$this->load->view('register', $errors);
Hi make one html from which submitting without refresh by jquery. Problem is that I am beginner and I dont know how to add validation for html form. I need changes in script so first form will validate by jquery or ajax then it will submit by jquery witout page refresh.. have look in my code. Please provide me working solution in that first form validate by ajax jquery then submit by jquery without refresh.. Thanks in advance
JQUERY:
<script type="text/javascript">
$(document).ready(function(){
$("form#form").submit(function() {
// we want to store the values from the form input box, then send via ajax below
var uno = $("#uno").val();
var name = $("#name").val();
var licence = $("#licence").val();
var email = $("#email").val();
var phone = $("#phone").val();
var dataString = 'uno=' + uno + '&name=' + name + '&licence=' + licence + '&email=' + email + '&phone=' + phone;
$.ajax({
type: "POST",
url: "addd.php",
data: dataString,
success: function(){
$('form#form').hide(function(){$('div.success').fadeIn();});
}
});
return false;
});
});
</script>
HTML FORM:
<form id="form" method="post" name="form" action="">
<fieldset id="opt">
<legend>Driver Information</legend>
<label for="choice">Name : </label>
<input type="text" id="name" name="name" value=""> <br />
<label for="choice">Licence No : </label>
<input type="text" id="licence" name="licence" value=""> <br />
<label for="choice">Email : </label>
<input type="text" id="email" name="email" value=""> <br />
<label for="choice">Phone : </label>
<input type="text" id="phone" name="phone" value=""> <br />
<input type="hidden" name="uno" id="uno" value="" />
<br />
</fieldset>
<div align="center">
<input id="button2" type="submit" value="Add Driver" />
<input id="button2" type="reset" />
</div>
</form>
I found multiple errors/mistakes on your HTML form too. some of them I want to mention..
for attribute of label have same value of the next input/select id, read:
http://www.w3schools.com/tags/att_label_for.asp
Dont assign name for name and id attribute, it's misleading.( good practice)
Don't write value ="", if you there is no initial value of any input box.
If u want to validate a hidden field then write some value for that on form intialization, otherwise it wud be always empty and your validation never works.
If u want to validate all input field together for emptyness then use :input selector ,read :
http://api.jquery.com/input-selector/
Don't forget to validate email address
If you want to post a form via ajax then there is no need to write method and action attribute in your form
Your reset button shoud have some value, otherwise its takes default value.
A very useful and handy article for newbie for jquery ajax validation
http://jorenrapini.com/blog/css/jquery-validation-contact-form-with-modal-slide-in-transition
OR you can use jquery validator plugin :
http://bassistance.de/jquery-plugins/jquery-plugin-validation/
here is your neat and clean form
<form id="driverForm" name="driverForm">
<fieldset id="opt">
<legend>Driver Information</legend>
<label for="lname">Name : </label>
<input type="text" id="lname" name="lname" > <br />
<label for="licence">Licence No : </label>
<input type="text" id="licence" name="licence" ><br />
<label for="email">Email : </label>
<input type="text" id="email" name="email" ><br />
<label for="phone">Phone : </label>
<input type="text" id="phone" name="phone" > <br />
<input type="hidden" name="uno" id="uno" /><br />
</fieldset>
<div align="center">
<input type="submit" id="submitForm" name="submitForm" value="Add Driver" />
<input type="reset" value="clear" />
</div>
</form>
Hope this will be useful for you.
UPDATE
put it insdie submit() and before ajax like this
$("form").submit(function() {
if($('#lname').val() == '')
return false;
});
$.ajax({
NOTE: dont create dataString Manually there is inbuilt function in jQuery.
serialize
Please note that ,this is not matter that your form is submitting or not. most thing is it a valid form or not.
Happy to help :)