I have below terms and condition checkbox created for a form
<input type="checkbox" name="checkbox" id="checkbox_id" class="checkbox required-entry" value="value">
I am getting "this is required field" as validation message but I want to change it to "Please check our terms and condition". Please suggest.
['validate-firstname', 'First name is required field.', function(v) {
return !Validation.get('IsEmpty').test(v);
}],
modify or add one rule in validation js like above code.
Related
I have this radio button
<input class="form-check-input" type="radio" name="discount" value="Yes">
<input class="form-check-input" type="radio" name="discount" value="No" checked>
and this hidden field
<input type="hidden" name="discount_valid" value="true">
by default this hidden field is true
Now when i'm trying to validate if discount_valid is true then it should submit the form this code is working but i want to add another condition, if discount is No then it should submit the form irrespective of whether discount value is true or false. If discount is Yes and discount_valid is false then form should not submit.
$validator = Validator::make($request->all(), [
'discount_valid'=>'in:true',
]);
By "submit the form", I have to assume you mean "processing the form request".
I've constructed a validation rule from your specifications:
if discount_valid is true then it should submit the form
if discount is No then it should submit the form irrespective of whether discount value is true or false
If discount is Yes and discount_valid is false then form should not submit.
$validator = Validator::make($request->all(), [
'discount_valid'=>'exclude_if:discount,No|in:true',
'discount'=>'in:No'
]);
I have added a checkbox list in a loop with iCheck. The html is as follows for checkboxes.
<input class="iCheck out-check" type="checkbox"
data-parsley-mincheck="1"
data-parsley-multiple="promo-outs"
data-parsley-group="outs"
data-parsley-error-message="You need to check something."
data-parsley-required = "true"
data-parsley-trigger="change"
data-parsley-errors-container='div[id="outerror"]'
id="outs" name="outs"
value="1" />
And I have a div with the id of "outerror". When I do the validation it fails when no checkbox was checked and works as expected but it does not show the message.
I'm using Angular $http (http://docs.angularjs.org/api/ng.$http) to submit a form. The server returns JSON:
[{
"hasValidationErrors": true,
"validationErrors": {
"inputNameAttributeValue": "Error Message 1",
"anotehrInputNameAttributeValue": "Error Message 2"
}
}]
Once I receive the JSON response, how do I notify Angular that certain form fields are in an error state so that it automatically changes the view to show error messages?
For example, if I use this markup (from http://www.ng-newsletter.com/posts/validations.html):
<div class="row">
<div class="large-12 columns">
<label>Your name</label>
<input type="text"
placeholder="Name"
name="inputNameAttributeValue"
ng-model="signup.name"
ng-minlength=3
ng-maxlength=20 required />
<div class="error"
ng-show="signup_form.name.$dirty && signup_form.name.$invalid">
<small class="error"
ng-show="signup_form.name.$error.required">
Your name is required.
</small>
<small class="error"
ng-show="signup_form.name.$error.minlength">
Your name is required to be at least 3 characters
</small>
<small class="error"
ng-show="signup_form.name.$error.maxlength">
Your name cannot be longer than 20 characters
</small>
</div>
</div>
</div>
I'm looking for a solution that works with my existing data binding markup in my html doc.
I can change the markup, but I don't want to have two separate sections of markup for each form input (one for client side validation and another for validation after the JSON response).
Update:
For example, if required form fields have not been touched by the user
before the form is submitted, they will not show error messages. So,
my goal is that upon form submission, all form fields are validated
and show validation messages if needed.
That's because ng-show is triggered by both $dirty and $invalid flag.
You can manually set all $dirty of input fields to true when ngSubmit fired.
But, in the case the user has tampered with the form, the JSON
response from the server should be used to add validation messages as
well.
If validation failed on server, just bring these tampered values back to angular models on client and use $apply if needed. AngularJS should do the rest of work.
Simulating example: http://jsfiddle.net/djpV8/4/
Origin:
how about set error messages to the scope and simply display it when it's defined:
scope.errorMessages = returnedJson.validationErrors;
just add a block for displaying custom message from server
<!-- place error messages next to corresponding input fields. -->
<small class="error"
ng-show="errorMessages.inputName"
ng-bind="errorMessages.inputName"></small>
I'd like to validate a form with ajax where there is a checkbox field.
I tried in this way but I can't get the value of checkbox field.
MY FORM
<form class="Form" action="?">
<input type="text" name="type" id="type" />
<input type="text" name="action" id="action" />
<input type="checkbox" name="chk" id="chk" value="1">
<input type="submit" value="INSERT" />
</form>
MY AJAX
$(".Form").submit(function( event ) {
event.preventDefault();
$.post("control.php", {
type: $("#type").val(),
action: $("#action").val(),
chk: $("#chk").val()
},
function(data){
$("#msg").html(data);
}
});
CONTROL.PHP
// CHECKBOX VALUE
if($_POST["chk"] == 1){
echo "THE VALUE IS 1";
exit;
}
How I could Do this? Thanks
EDIT
I tried pass to control page the chk with no success
$.post("control.php", {
type: $("#type").val(),
action: $("#action").val(),
chk: $("#chk").prop('checked')
},
and
$.post("control.php", {
type: $("#type").val(),
action: $("#action").val(),
$("#chk").prop('checked')
},
How can I define the name of my checkbox field in ajax post? thanks
This returns true if the checkbox is checked:
$("#chk").prop('checked')
And in PHP check it like this:
if(isset($_POST["chk"])) // true
For check boxes, php passing value if only check box selected. so you can check is that check box received to PHP page. if its received user has selected it or if user not selected, no check box name passing to PHP page.
so you can check
if(isset($_POST["chk"]))
...
if this returns true, that means user selected check box and if not user not selected...
One solution is you send a zero value with the same name in a hidden input
<input type="hidden" name="chk" value="0">
<input type="checkbox" name="chk" id="chk" value="1">
and if chk is checked the hidden input chk will be overriden in the $_POST
Hi there Im trying to do a few things with jQuery validation plugin and seems stuck on one place.
Here is some code:
<script type="text/javascript">
$(document).ready(function(){
$('#myform').validate();
$('#email').rules('add', {required: true, messages: {required: 'email is required'}} );
$('#phone').rules('add', {required: true, messages: {required: 'phone is required'}} );
$('#validate').click(function(){
$('#result').text($('#myform').validate().form());
return false;
});
});
</script>
<form id="myform">
<div>email:<input type="text" id="email" /></div>
<div>phone:<input type="text" id="phone" /></div>
<div id="result"></div>
<input id="valdate" type="image" src="images/submit.png" />
</form>
As a result i keep getting a wrong error message. If i click on submit button 'phone is required' is shown near email input and 'email is required' isnt shown at all.
Whats wrong with this code ?
You might consider something like the below. It's a bit clearer to read and debug. Since you are using standard rules like "required", you don't have to specify a message unless you want something different. The rules and messages are identified by the name of the input field (e.g. email).
The errorPlacement option is where you specify the location of the messages. You don't have to include this option; the default is to append the message to the input field. But if you have layout divs or need special position for message on radio boxes, or what have you, this is the place to do it.
$(document).ready(function(){
$('#myform').validate({
rules:{
email: "required",
phone: {required:true, minlength:7}
},
messages:{ //not required as default message for "required" rule makes same text
email: "email is required",
phone: "phone is required",
},
errorPlacement: function(error, element) { //this is where to put positioning rules
error.appendTo(element.parent()); //just an example
}
});
});
OK It seems like I've found the problem.
You HAVE to add NAME attribute to elements anyway.
In my example if you add appropriate names to input elements it will work nice.
The following approach:
<script type="text/javascript">
$(function(){
$('#myform').validate({
rules: {
phone: 'required',
email: 'required'
},
messages: {
phone: 'phone is required',
email: 'email is required'
}
});
});
</script>
along with adding name attribute to each input fields, works perfectly.
Try adding the rules first and then calling $('#myform').validate()
It will not work. You have to call validate method first.
Using input names approach
I know i can do it using names as you mentioned above.
But unfortunately i will have to use ids.
content will not be constant. It will vary depending on some rules. So as a result almost each time i will have a different page.
There are will be many controls with different ids. many validation groups etc.
So using "names approach" just doesnt meet my requirements.
Any thoughts how to use $(selector).rules('add') approach??
P.S.
I've found following example http://www.coldfusionjedi.com/index.cfm/2009/2/22/Using-jQuery-to-add-form-fields--with-validation and it works pretty nice and there is nothing special in code.