Προσθήκη προσαρμοσμένου JavaScript σε φόρμα

  • Άρθρο

Σημείωση

Από τις 12 Οκτωβρίου 2022, οι πύλες του Power Apps είναι Power Pages. Περισσότερες πληροφορίες: Το Microsoft Power Pages είναι πλέον γενικά διαθέσιμο (ιστολόγιο)
Σύντομα θα μετεγκαταστήσουμε και θα συγχωνεύσουμε την τεκμηρίωση των πυλών Power Apps με την τεκμηρίωση Power Pages.

Οι καρτέλες βήματος βασικής φόρμας και φόρμας πολλών βημάτων περιέχουν ένα πεδίο με το όνομα Προσαρμοσμένο JavaScript το οποίο μπορεί να χρησιμοποιηθεί για την αποθήκευση του κώδικα JavaScript για να μπορείτε να επεκτείνετε ή να τροποποιήσετε την εμφάνιση της φόρμας ή τη συνάρτηση.

Το προσαρμοσμένο μπλοκ της JavaScript θα προστεθεί στο κάτω μέρος της σελίδας, ακριβώς πριν το στοιχείο κλεισίματος ετικέτας φόρμας.

Πεδία φόρμας

Το αναγνωριστικό εισόδου HTML ενός πεδίου πίνακα ορίζεται στο λογικό όνομα του χαρακτηριστικού. Επιλογή ενός πεδίου, ρύθμιση τιμών ή άλλος χειρισμός από την πλευρά του προγράμματος-πελάτη εύκολα με το jQuery.

$(document).ready(function() {
   $("#address1_stateorprovince").val("Saskatchewan");
});

Σημαντικό

Η προσθήκη μιας στήλης επιλογής σε φόρμα που καθορίζεται από μοντέλο για χρήση σε ένα βήμα φόρμας πολλών βημάτων ή σε μια βασική φόρμα θα εμφανιστεί στη σελίδα πύλης ως στοιχείο ελέγχου αναπτυσσόμενου διακομιστή. Η χρήση προσαρμοσμένης JavaScript για την προσθήκη πρόσθετων τιμών στο στοιχείο ελέγχου θα έχει ως αποτέλεσμα το μήνυμα "Μη έγκυρο όρισμα καταχώρησης ή επιστροφής κλήσης" στην υποβολή σελίδας.

Επιπλέον επικύρωση πεδίου από την πλευρά του προγράμματος-πελάτη

Μερικές φορές ίσως χρειαστεί να προσαρμόσετε την επικύρωση των πεδίων της φόρμας. Το παράδειγμα αναγκάζει το χρήστη να καθορίσει ένα μήνυμα ηλεκτρονικού ταχυδρομείου, μόνο αν το άλλο πεδίο για την προτιμώμενη μέθοδο επικοινωνίας έχει οριστεί σε "Ηλεκτρονικό ταχυδρομείο".

Σημείωση

Δεν υποστηρίζεται η επικύρωση πεδίου από την πλευρά του προγράμματος-πελάτη σε ένα υποπλέγμα.

if (window.jQuery) {
   (function ($) {
      $(document).ready(function () {
         if (typeof (Page_Validators) == 'undefined') return;
         // Create new validator
         var newValidator = document.createElement('span');
         newValidator.style.display = "none";
         newValidator.id = "emailaddress1Validator";
         newValidator.controltovalidate = "emailaddress1";
         newValidator.errormessage = "<a href='#emailaddress1_label' referencecontrolid='emailaddress1 ' onclick='javascript:scrollToAndFocus(\"emailaddress1 _label\",\" emailaddress1 \");return false;'>Email is a required field.</a>";
         newValidator.validationGroup = ""; // Set this if you have set ValidationGroup on the form
         newValidator.initialvalue = "";
         newValidator.evaluationfunction = function () {
            var contactMethod = $("#preferredcontactmethodcode").val();
            if (contactMethod != 2) return true; // check if contact method is not 'Email'.
            // only require email address if preferred contact method is email.
            var value = $("#emailaddress1").val();
            if (value == null || value == "") {
            return false;
            } else {
               return true;
            }
         };

         // Add the new validator to the page validators array:
         Page_Validators.push(newValidator);

      });
   }(window.jQuery));
}

Γενική επικύρωση

Όταν κάνετε κλικ στο κουμπί Επόμενο/Υποβολή εκτελείται μια συνάρτηση που ονομάζεται entityFormClientValidate. Μπορείτε να επεκτείνετε αυτή τη μέθοδο για να προσθέσετε προσαρμοσμένη λογική επικύρωσης.

if (window.jQuery) {
   (function ($) {
      if (typeof (entityFormClientValidate) != 'undefined') {
         var originalValidationFunction = entityFormClientValidate;
         if (originalValidationFunction && typeof (originalValidationFunction) == "function") {
            entityFormClientValidate = function() {
               originalValidationFunction.apply(this, arguments);
               // do your custom validation here
               // return false; // to prevent the form submit you need to return false
               // end custom validation.
               return true;
            };
         }
      }
   }(window.jQuery));
}

Δείτε επίσης