Custom Validation Web form

Hi All,

I am trying to implement validation for webform and I have the below code.

frappe.web_form.after_load=()=>{
	
	//Phone number
	frappe.web_form.on('phone_number',(field,value)=>{

		if(!(CheckSpecialchar(value)==false && CheckAlphabets(value)==false && value.length==10)){
			frappe.throw(__('Invalid mobile number'))
		}
	});

The issue with above method is it will not wait for user to complete the input rather it will start throwing the error on each second idle. is there any way to implement validation which will wait until user finishes his input then validate the field and display the error if any

Thanks!!

2 Likes

Did you find a way?

1 Like

any updates

You need to use validate. When the uaer tries to save the form validation occurs

how can i do that can u show me code?

Maybe set a timer?

frappe.web_form.on('phone_number', (field, value) => {
  // set a timer for 500 milliseconds (0.5 seconds)
  let timer = setTimeout(() => {
    if (!(CheckSpecialchar(value) == false && CheckAlphabets(value) == false && value.length == 10)) {
      frappe.throw(__('Invalid mobile number'))
    }
  }, 500);

  // clear the timer when the input event is triggered
  $(field).on('input', () => {
    clearTimeout(timer);
  });
});

1 Like

sir i want to append the error msg at the list of errors at frappe.msgPrint
i want all the errors appears once at the modal which includes all errrors

In you client scrip on your From your form you can get the value from the field you want to validate.
This is executed once you hit save
If you return true on the validation the entry is saved, else it will show the error on a msgprint.
you can add as many messages to msgprint as you want all they will show up on the message

frappe.web_form.validate = () => {
    value = frappe.web_form.get_value("product_sku");
    frappe.web_form.set_value("product_barcode",value);
    if (value.startsWith("SKU"))
        return true;
    else 
        frappe.msgprint("Please make sure that your SKU starts with SKU");
        return false;
};