X-Cart forums

[pifemaster]

Hello,

I am running X-Cart Gold version 4.5.4.

I have 5 different prducts that use custom text fields as product options.

2 products each have 1 custom text field. 3 products each have 2 custom text fields.

Is there a way to make it REQUIRED that the customer enter something in the custom text fields in order to be able to add the product to their shopping cart?

Thank you,
Robert

[cflsystems]

You can but you have to do some js validation on them - http://help.x-cart.com/index.php?title=X-Cart:Product_Options#Product_options_validation

[pifemaster]

Steve,

Thank you for the reply. I read through the information you indicated. Unfortunately, I am not sure how to create the proper validation script. I was hoping someone would be able to show me 2 different examples:

Product A: Has 1 custom text field with an option group name of "Event Date" and I want to make this field required.

Product B: Has 2 custom text fields with the option group names of "Client" and "Date" and I want to make BOTH fields required.

Thank you in advance to anyone that would be able to provide the validation code for this.

[pifemaster]

Anyone able to help with this?????

[totaltec]

Well we need to get the value of the input box first. So look at the source of the page, using Chrome right click on the input box and "inspect element".

Now you should see something similar to this:
<input id="po455" type="text" name="product_options[455]">

I'm sure you could do this a number of ways, but I am going to just use the input's id in order to reference this box in my JS.

var option = $('#po455').val();

This declares a variable, and names it "option", then sets it using a jQuery method of obtaining the value of the input by referencing it's id. So now we can refer to that value simply as option in our code.

Consider this code:

if (option != "funky") {
window.alert(option);
return false;
}

So now it is checking if the value of the input box matches the string "funky", if it doesn't then it alerts whatever the current value of the box is. If it is blank you should see nothing in the alert box, if you type "Whalah!" into the box it should alert that to you. The bottom line is that if it matches what you put between the braces () then it will perform what you put within the curly braces {}. And then it returns false, and the form is not submitted.

So to check if the box is empty, we would try something like:

if(option == '' or option == null) {
alert("Type something, you dope!");
return false;
}

[pifemaster]

Mike,

Thank you very much for the reply. Here is a link to one of my product pages:
http://www.pifemaster.com/store/video-combo-pack.html

I did use Google Chrome to inspect the 2 boxes input fields and here are the results:
<input id="po9" type="text" name="product_options[9]" value="">
&
<input id="po8" type="text" name="product_options[8]" value="">

So... if I want to make sure they type SOMETHING in each of the 2 input fields, would this work?

var option = $('#po9').val();
if(option == '' or option == null) {
alert("Please enter the date that the highlight video was taken! ");
return false;
}

var option = $('#po8').val();
if(option == '' or option == null) {
alert("Please enter the name of the client in the highlight video! ");
return false;
}

This is completely over my head so I appreciate your help.

[totaltec]

The code you have mocked up looks fine to me, except you should probably have option1 and option2 instead of reusing the variable. Though it may work just fine the way it is.

Actually my Smarty is leaking through in my example. Instead of "or" you should use "||".

You should name the variables something that makes sense to you, so you can understand the code when you look at it later.

It is also a good idea to check if the variable exists before running any other operations.

Consider this:

var date = $('#po9').val();
if(date == '' || date == null) {
alert("Please enter the date that the highlight video was taken! ");
return false;
}

var name = $('#po8').val();
if(name == '' || name == null) {
alert("Please enter the name of the client in the highlight video! ");
return false;
}

I am not testing this script, just making the example. The way to see if it works is by trial and error, that is also how you learn. To troubleshoot any script you need to break it down into it's smallest pieces. For instance, at first you can just declare the variable, then alert its contents. Rather than trying to complete your script in its entirety right from the start. If you can start seeing the alert box pop up, then you know you are on the right track.

[pifemaster]

Mike,

I just tried the code above and it does not work.

I am just really frustrated that X-cart has to make such a basic feature such a hassle to implement. Why not just give a checkbox in the admin area to allow us to make individual input fields "Required". Does not seem any different than making a field on the contact form a required field.

[totaltec]

Ah Robert, don't get frustrated. If it were easy it would be limited. For it to be infinitely customizable and adaptable, it has to have a certain level of learning curve. Why they don't put a checkbox to make it required? Well this way gives you so many more options. For instance, you have control over the way it handles their mistake, you can alert specific text that explains it exactly. I am to blame for guiding you wrong, if anything.

For instance, if Photoshop came pre-loaded with a 1000 ready made pictures, but you could not paint your own, well it wouldn't be worth much would it?

I haven't tested the code I wrote above, I am trying to teach you the basics of Javascript. I'll have another look at it if you can't crack it. But I'd like it if you tested it yourself.

Read through all of my instructions again. Try getting the alert to show up with one of my simple examples. Deconstruct it until you can determine what I did wrong. And if you can't get it I'll stick with you until it is resolved.

[totaltec]

All that is wrong is the "name &&" bit. Try this code:

var name = $('#po8').val();

if(name == '' || name == null) {
alert("Please enter the name of the client in the highlight video!");
return false;
}

]

I'll update my example above so as not to confuse people who don't read the whole thread..