jquery input validation+background color - php

I have an HTML form where I want to add some validation logic.
In that form i have two input fields, one of them has to get always integer values, while the other one have to get always float values. (first one is items number and other one is total cost).
I want those input fields to change background color to light red if the input value is wrong (float value as item number, for example) and i want to care only for the logic of it, maybe i can guess jQuery can take care of everything else, but I can't find any help on internet on how to get this done without reinventing the wheel.
Does anyone have some hints on how to do that?

You seem to be talking about form validation
you can write your own code in javascript or jQuery.... or google about form validation you will get tons of result...
for a primer you can check this jQuery validate plugin
http://jquery.bassistance.de/validate/demo/
http://docs.jquery.com/Plugins/Validation

Related

Validating input field on exit of field pure PHP

I'm trying to create an system that can calculate all input given for invoice related calculating.
What I'm trying to achieve is when I have multiple text fields (Yes I want to use text fields otherwise I would have used the build in validator for the number field)
So when I click out of a text box it needs to validate live if the input is numeric. and when its not it should show some message above it that it isn't and make the field red like an error. BEFORE submitting the form
And yes I know this is easily done with jQuery/ajax/php setups but I want to only use PHP. So IS there some kind of way to do this pure PHP or not because I can't seem to find some way or tutorial that does this.
Sorry if this question is shit but I'm at wits end now searched for 2 hours straight and cant even come close to finding some way that uses only PHP.
I'm using an hidden div and going to use style tags that only show when input is wrong so the errors/red colors are already done now I just need some kind of validator
Thanks in advance and again I'm sorry if this is a shitty question
If you want the validation on server-side in PHP you need to use either a ajax request on each click and send the data, or do the following before you echo or output anything, for example if your model or controller...Iterate on your data and run this regex rule on each of your values:
if( preg_match('/^[1-9]\d*(\,\d+)?$/', $inputValue ) ) {
// It is numeric
}
else{
// It is not numeric
}
I assume you use . as your decimal operator? If no, the rule should be:
preg_match(^[1-9]\d*(\,\d+)?$)
This will tell you if it's numeric.
Note that the $inputValue is the variable you are testing.
Because you want to validate a text box live on the browser (which is the client side), you cannot use PHP which is server side language to accomplish this. Sorry but you cannot.

Updating several input fields when one of them changes its value

I am building a web application in php (actually cakephp), HTML5, & Jquery.
In one page I have a form which will make too many calculations. In it there is a form with maybe 30 input fields. These fields are related to each other with formulas.
Whenever a field value changes, I want to update all others. How to achieve this?
Note: if there is some SDK which will help me in this, it will be better.
Update 1
I will make a short example: it is about designing some industrial product, let us call it a cabinet.
A cabinet consists of too many items, and these depend mainly on: Width/Height/Depth + some additional characteristics (around 5). I need to calculate the specs of the components which constitute a cabinet. There are maybe 15 components. each component has a specific formula, and may depend on all mentioned inputs. If I change the width, many of the components specs should automatically update.
The general idea is, you need to use a generic selector:
$(".my_inputs")
Add an 'on()' EventHandler:
$(".my_inputs").on('change', function() { }
Then, within it, do whatever type of data manipulation you want:
$(".my_inputs").on('change', function() {
// use jquery to repeat through all .my_inputs and alter their data
// or set all .my_inputs to a specific value
// or do anything else you want
}
Now that you have the general idea, look through the jQuery API to find details on however you'd like to manipulate the data (or just use good ole' Javascript! :)
It is still a JS solution. Give each of the input boxes a class name (e.g. "myClass"), then you can do this:
$('#myInputfield').keyup(function(){
$('.myClass').each(function(index){
$(this).val($('#myInputfield').val());
});
});
NOTE: You need JQuery to achieve this and it is assuming you are looking for changes in just one textbox (i.e. textbox with ID:myInputfield). The main textbox should not have the same class.

Placeholder Text Validation - PHP/Javascript

I have 3 sets of 4 input fields that I want the user to complete and submit to my site. Fields are optional.
I have an $all variable that I am storing the data inside.
However, if any input fields aren't completed, then I'd like to remove the placeholder text from the $all variable.
Currently my output (var_dump) for completing the first row is:
string '1|1|1|1
Height (cm)|Width (cm)|Length (cm)|Weight (kg)
Height (cm)|Width (cm)|Length (cm)|
' (length=133)
However, I'd like it to be:
string '1|1|1|1' (length=7)
Here is my current code on Pastebin: http://pastebin.com/2Je75vN0
As you can see, placeholder text is placed inside the field using javascript and the title attribute.
Can a very nice and gifted person please point me in the right direction with this? Or should I perhaps be using Javascript to validate this?
Many thanks for any pointers.
Consider using HTML5's placeholder= attribute (with a JavaScript fallback for older browser).
It's inefficient and it doesn't make sense to handle placeholders on the server side.

Visually truncating text without causing data problems

I've Googled this and browsed through SO and Programmers.stackexchange and not found a mention.
Background:
I'm working on a project where the users and the designer would like me to truncate the text I output to an updateable form for visual appeal. They don't want the text to be cut off by the end of the input field and want the text in the box to fit the length of the box.
Problem:
I know how to truncate the strings and I know how to get my script to ignore fields that weren't updated. What I don't know how to do is keep the data integrity from breaking down when users start updating the fields. Because the fields would no longer contain the full value, this seems like it would introduce serious flaws when I update the database.
Question:
Is there any way that I can give them what they want in terms of a truncated presentation, and then cause the full text of each input to appear if they try to edit that input... or do I just have to go back and say "What you want can't be done?" I'm open to other suggestions too. :)
I think you may be looking for the text-overflow CSS property.
If I understand correctly, you have a few challenges here. You need to display some data in the form truncated, which is relatively simple. You also need to make the data display in full if it's edited, and also substitute in full data for truncated data when the form is submitted, but avoid wiping out changes that your users have made.
You could do this with jQuery. Display the truncated data, but use .data() to store the full data. Also use .data() to store a flag on each field so you know if it has been edited or not. When a field gets focus, sub in the full data. When the form is submitted, check each field's flag to see if it's been edited. If it has, leave it alone. If the data has not been edited, remove the field contents and swap in the full length data. Then submit the form.
You'll present truncated data, allow the full data to be edited, and avoid submitting the truncated data if it's not edited.
I would consider something along the lines where you keep properties that contains the truncated string and the fulls string, and use the truncated string for display purposes. When they click into the form field, you could replace it with the full string. If there are no changes, then the value of the input would match the full string property. Along that principal, if they didn't change anything replace it, with the truncated string again.
If they have edited anything, you could then dynamically create an edited property to store the edited version of the string from the input field.
Basically at this point it would just be some simple property tests/equality checks.

how can i make a dynamic drop down box in php?

i need in an php file three drop down boxes or multiple select boxes.
the entries from these boxes are in a mysql database.
the single problem is that the entries in the thrid box depend on the second, and the entries in the second depend on the first.
can someone help? know any examples?
There are basically 3 ways to achieve this:
Use JavaScript to submit() the form to the server side during onchange of the dropdown and let PHP load the options and render the child dropdown accordingly based on the selected dropdown value. Technically the simplest way, but also the least user friendly way. You probably also want to revive all other input values of the form.
Let PHP populate all possible child dropdown values in a JavaScript array and use a JavaScript function to fill and display the child dropdown. A little bit trickier, certainly if you don't know JavaScript yet, but this is more user friendly. Only caveat is that this is bandwidth and memory inefficient when you have relatively a lot of dropdown items. Imagine three dropdowns which can each hold 100 items, that would mean a JS array of 100 * 100 * 100 = 1 million items. The page might then grow over 1MB in size.
Let JavaScript fire an asynchronous (ajaxical) HTTP request to the server side and fill and display the child dropdown accordingly. Combines the best of options 1 and 2. Efficient and user friendly. jQuery is extremely helpful in this since it removes the concerns about crossbrowser compatibility with regard to firing ajaxical requests and traversing the HTML DOM tree. You would otherwise end up with double, triple or even much more of code needed to achieve this.
If you let know in a comment or an update of your question which way you would prefer and where exactly you're stucking while implementing the solution, then I'll maybe update the answer to include a basic kickoff example.
I'm from Portugal, so, what we do it's based on Portuguese language, never the less, we've made many working websites and platform's with what you want, please check this link...
if this is what you want, I can send you the code:
http://www.medipedia.pt/home/home.php?module=farmacia

Categories