I'm looking to create custom validation messages on my activeforms in Yii2 for the client side validation. The goal i want to achieve is to get a bootstrap popover on the side of the form field with the validation error message of that field, e.g. password too short or password does not meet the requirements. These messages change dynamicaly based on the given input and validation rules.
I've been looking at using the clientValidateAttribute and create javascripts for the fields, this is working but i'm missing out on setting the proper validation messages coming from the model validation.
This is a simple example to create a popover based on some conditions in the clientValidateAttribute.
return <<<JS
var def = $.Deferred();
if (attribute.name == "email" && value !== "") {
$( ".login-pop" ).popover("show");
} else {
$( ".login-pop" ).popover("destroy");
}
deferred.push(def);
JS;
This will show an popover on the .login-pop class field when the attribute is email and its empty. I've been looking to use the messages array, but it looks like it's only set once.
Perhaps i'm mislead with the validation and there might be easier or better solutions to achieve this goal and be able to validate per field, return the proper messages to be used in a javascript tool.
Thank you.
Related
For the form fields, we can use validator and validation functions to validate and show the errors in extjs. How can I show the similar errors for the server side validation? i.e. Validation happens in backend and errors should be displayed if a certain condition is satisfied.
I have tried using markInvalid("message"), but this only highlights the field and doesn't show the message and also the highlighting goes away when user clicks out of the field.
Any suggestions are appreciated. Thanks.
markInvalid in fact is the official way to go. By default, the message is shown in the tooltip, you can change that through msgTarget: 'under'.
If you want to preserve the error message, then you have to ask yourself, until when. For example, when I change the value in the field, it should no longer show the error message.
To keep the server's message until the value is changed, you have to add to the field a custom validator:
validator: function(val) {
if(this.invalidValue && val==this.invalidValue) return this.invalidMsg;
return true;
}
and then, when the msg comes back from the server, call:
field.invalidValue = field.getValue();
field.invalidMsg = msg;
field.validate();
I have a simple web application so far that is written in php using the laravel framework.
My question is in the title: if I have a web form that has multiple SELECT elements, could somebody use javascript to append new options to that `SELECT' element and submit the form (therefore saving items that weren't suppose to options in my database?)?
As the comments have suggested, it is certainly possible to append options, or even change the values of what is being submitted.
To prevent this, you can use server side validation to check what is being passed in. Laravel provides validation out of the box that makes doing this a breeze.
The validation rule you want to use is in:
The field under validation must be included in the given list of values.
Inside your controller function that receives the request, just add this at the top to validate the request before you pass it in to your database:
$validator = Validator::make($request->all(), [
'select_input' => 'in:foo,bar',
], [
'select_input.in' => 'The option selected was not valid!',
]);
if ($validator->fails()) {
return Redirect::back()
->withErrors($validator)
->withInput();
}
You would need to add these to the top of your controller:
use Validator;
use Input;
use Redirect;
There's plenty more validation that you can utilise, just read the docs.
I have a signup form built with AngularJS using frontend and backend (with Express.js) input verification. Whenever a user enters an invalid email address, like qwidjq&/%, I'd like to show an error message and send the form back to the user. The email input field should contain the invalid email as the value.
The problem is that I cannot init input(type="email") fields with invalid email values. Only input(type="text") works. Here is an example.
Any ideas how to work around this restriction? I don't want to use input(type="text") and a custom directive. I'd like to keep input(type="email") as it changes keyboard layout on mobile devices.
Thanks in advance!
Perhaps display the bad text NEXT to the input element, e.g.
<input type="email" /><span id="emailerror">qidjq&/% is not a valid address</span>
You can initialise your input by initialising your model with data.
Example: http://plnkr.co/edit/TUJ6lv?p=preview
Unfortunately initializing a model to display invalid data would require patching AngularJS. In fact if you initialize any validated field with invalid data, it will appear blank.
Here is the code that is causing the email input to display blank without a valid email:
https://github.com/angular/angular.js/blob/master/src/ng/directive/input.js
(line 622)
var emailValidator = function(value) {
if (ctrl.$isEmpty(value) || EMAIL_REGEXP.test(value)) {
ctrl.$setValidity('email', true);
return value;
} else {
ctrl.$setValidity('email', false);
return undefined;
}
};
Forgive me if I'm being stupid but can't you just disable the button on your form while the inputs are invalid. Alternatively, don't leave the form until you have had a positive response to your ajax request. If you get a negative response then show an error message. The data will still be in the form. I'm not familiar with Express.js so perhaps that is forcing you to refresh the form. I thought the whole point of using frameworks like Angular is to give you total control of the UI.
I'm working on designing a new process for internal job submission for work which now involves javascript for it to work effectively.
Scripting is not my forte but that hasn't deterred me, I've been able to find three different pieces of code to insert into the various buttons and fields and they've done what they should do. My problem is I need to combine some of these for an extra validation on submit. This is where I fall short.
The process:
There is a required field in the form which currently runs a custom validation script to check a certain format specific to the code needed for a job. This runs well and I was even able to add an alert and hint images that show when incorrect and a little tick when correct. Beautiful.
The second major part of the form is in the submit button. I hacked together a code which not only emails the submitted form with fields as the subject line but also makes all fields read only before doing so. Brilliant.
Here's the messy part. A user can enter a correct or incorrect required code and the validator does its bit but that doesn't stop them from still submitting the form. Fine. I can fix that by running the validator again on the submit button so it not only gives user feedback on blur of the required field but again validates on submit so if the field is incorrect the submit stops until the user has the correct value in the field. This is where my knowledge stops like a cliff edge and I can't seem to build a bridge.
I've tried numerous ways of calling the field value then just running the same validation script with some if and else statements but it just doesn't work.
Can anyone help? Current code for submission button below but keep in mind that the validation section of this code is also attached to the required field directly (this affects it?):
function OR_Stuff() {
var ProjectTitle = getField("ProjectTitle").value;
var Brand = getField("Brand").value;
var Name = getField("Name").value;
var Noosh = getField("INT_NooshCode").value;
for (var i = 0 ; i < this.numFields ; i++) {
var f = this.getField(this.getNthFieldName(i));
if (f.type != "Submit") // Change f.type to button name in form that the action is applied to
{
f.readonly = true;
}
}
this.mailDoc({
cTo: "email",
cBcc: "email",
cSubject: "NEW JOB: "+Brand+" - "+ProjectTitle+" - "+Noosh,
cMsg: "Thanks "+Name+" for sending through this job."
});
}
var re = /^\d{5}[A-Z]\d{2}$/
if (re.test(INT_NooshCode.value) == false) {
this.getField("RequiredAlert").display = display.visible;
this.getField("NooshTick").display = display.hidden;
app.alert("Sorry, we can't start a project without a Noosh code. \n\nPlease enter a valid Noosh code EG: 34256P02");
}
else {
OR_Stuff();
}
Just working on a class project and I can't figure out what to do next.
I've got a form that is being validated with JavaScript. It's the usual information, name, cc# email, etc.
Well the only tuts I can find relate to how to get the form to validate in the first place, which I've already accomplished.
Now all I need to do is figure out how to get the information that I've captured to display in the confirmation page. I don't need any server side validation if that helps.
Here's a link to the page so far (http://sulley.dm.ucf.edu/~ph652925/dig3716c/assignment4/dinner.html)
Any pointers or references?
<?php
print_r($_REQUEST);
?>
will print whatever value the PHP callback is getting from your form.
=H=
You could try to use the GET parameters to forward the info:
link.to.new.page.html?param=value¶m2=value2
etc...
It looks like you're using PHP. If you're sure you don't want any validation, of any kind, then the simplest way to output what was on the form (with some degree of control over what it looks like) is by using the POST global variable in PHP:
<?php
$firstname = $_POST['firstName'];
// etc etc for the other fields
?>
You can then output whatever you want by using those variables. The 'name' property for the HTML fields corresponds to what goes inside the square brackets in the PHP code above.
First, I would like to note that if you are using any server side application, you should absolutely validate the input on the server script before doing anything with it. The client side validation is really intended to make it easier for the user to enter the correct information and can be easily hacked or irrelevant if javascript is off... This said, on the client side, you could intercept the submit event, check the different field values. If you have errors, you display error messages, otherwise, you submit the form. example:
if we have this form:
<form action"myActionscript.php" method="GET" id="#myForm">
// form items here
</form>
and then this script (Beware, code not tested)
<script type="text/javascript">
var f = document.getElementById('myForm');
if (f.addEventListener) { // addEventListener doesn't work in ie prior ie9
f.addEventListener('submit', checkForm);
}else{
f.attachEvent('submit', checkForm);
}
function checkForm() {
// Check all input fields logic,
// you could have an errors array and add an error message for each
// error found. Then you would check the length of the error array,
// submit the form is the length is 0 or not submit the form
// and display errors if the length is > 0.
if (errors.length > 0)
{
// iterate through the array, create final error message
// and display it through an alert or by inserting a new
// DOM element with the error message in it.
// [...]
}else{
f.submit();
}
}
</script>
I have to say that the whole thing would be much easier and certainly more cross-platformed if you used a javascript library like jQuery... ;)